1311464 - Firefox causes nauseating SVG blur when positioned on a half pixel

Status: VERIFIED DUPLICATE of bug 608812

(Firefox :: Untriaged, defect)

Description

[u529383]

Attachment: sample.html

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:49.0) Gecko/20100101 Firefox/49.0
Build ID: 20160922113459

Steps to reproduce:

Opened websites containing SVG icons. This problem is also present up to the latest Nightly 52.0a1 (2016-10-19) and has been left unfixed for more than a year, at least.

For this case we will use the YouTube subscription page using the new Material layout, after logging in.

To switch to the Material layout, after logging in, edit YouTube's "PREF" cookie (any cookie editor add-on will do, or console command too), switch the flag "f6" value to 4, or add it if doesn't exist, meaning that the "PREF" cookie must have the "f6" set as such "app=desktop&f6=4&hl=en". Reload the page and go to subscription page.

Notice on the top right corner the 2 SVG buttons, one switchs the layout to GRID layout and the other to LIST layout.

Keep in mind that this isn't the only case, the YouTube controls also suffer the same problem when they are positioned in a half pixel, as well as any other SVG outside YouTube in the same offset with no CSS crisp/sharp filter set.

Proposing to use CSS sharpening filters is not a solution, or viable since this problem affects all websites using SVG icons, not just one. In fact, CSS sharpening techniques makes the problem even worse since any SVG with curves will appear completely jagged.

This screenshot shows the problem with 500x magnification compared to Chrome under the same circumstances (half-pixel positioning in both browsers): http://i.cubeupload.com/atCnio.png

An html with YouTube's SVG icon sample is attached, open in Firefox and in Chrome to see the very obvious problem in Firefox.


Actual results:

Both icons are completely blured to the point of causing visual nausea which as a result causes a user to switch to a different browser.


Expected results:

The icons should treat the half pixel positioning like any other browser does and compensate to the favorable side (whichever the other browsers use or set a standard, be it left or right) to prevent blurring.

With more websites making use of vector graphics fixing this is becoming equally important.

Comment 2

[u529383]

This bug should be made the main report of this problem instead of the other because the other one gives the idea that the problem is restricted to a single component of YouTube pages when this is in fact a problem that is present in the entire Firefox branch up to Nightly.

Comment 3

[Robert Longson [:longsonr]]

We already have bug 1046835 which would seem to cover the same ground. I could duplicate all your bugs to that one if you like.

Comment 4

[u529383]

It would appear so but it is not, and it is also not a good bug since 1) after more than two years it is still labeled as "unconfirmed" while this one showed without a doubt that this problem exists on any platform and 2) it gives the wrong idea that it is restricted to Macs with retina displays when the bug itself is present in all Firefox versions, regardless of the OS.

The current issue here shows that clearly and gives no room for wrong interpretation and should be made the main one, otherwise it will continue to be ignored because it keeps being labeled as duplicate of bad and forgotten reports.