Closed Bug 1190815 Opened 9 years ago Closed 6 years ago

SVG icons blurry in YouTube's new player

Categories

(Core :: SVG, defect)

Product:
Core
Component:
SVG
Version:
56 Branch
Type:
defect
Priority:
Not set
Severity:
normal
Rank:
50

Tracking

()

Status:
RESOLVED DUPLICATE of bug 608812
Tracking Flags:
Tracking Status
platform-rel --- +

People

(Reporter: u529383, Unassigned)

Details

(Whiteboard: [platform-rel-Youtube]) 

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.125 Safari/537.36

Steps to reproduce:

This issue has been reported before in https://bugzilla.mozilla.org/show_bug.cgi?id=1165282

And it only resulted in a reply which conveys uninterest for the problem; "So YouTube need to fix it.".

Clearly YouTube does not care about this since they have been informed of this issue on the same day of that reply (3 months ago) and the problem still persists.

The experience is affected negatively as a result of this problem and since one side has demonstrated no interest in solving this problem and Firefox cleary stated that YouTube needed to fix it, how are its users suppose to overcome this problem?

So far the solution has been to simply stop using Firefox and use a different browser which does not present this issue (which seems to be all others except Firefox), as I have been doing frequently because the blurry icons in Firefox hurt my eyesight.

Since I still prefer to use Firefox as my main browser I am here trying again to see if this issue can be resolved.

As far as I could see this issue only happens in Firefox, so I cannot understand why "Youtube needs to fix it" if this browser is the only one having this problem.
Status: UNCONFIRMED → RESOLVED
Closed: 9 years ago
Resolution: --- → DUPLICATE
I am opening this again because Robert's solution is not a solution, it is another problem. Since I am unable to open the other issue again I am taking the opportunity to re-open this one in an attempt to gain more visibility than one buried, closed and ignored.

Robert suggested that the solution would be for YouTube to fix it, which they have not. Then he suggested that the solution was to add a crispedges CSS property to the SVG elements as a mean of correcting the problem, but the fact is that it creates an even worse problem, the elements become all jagged, they loose any anti-aliasing which results in an even worse experience than the respective blur issue which it aims to fix.

Comparison examples are shown below:

http://i.cubeupload.com/EVifNX.png

500% zoom

http://i.cubeupload.com/zQuyql.png

As it can clearly be seen, there is no way of resolving this issue, not from the YouTube side nor from the client side with userscripts or override Firefox css stylesheets, as suggested by Robert. This is a problem with the Firefox browser and it should be fixed by the Firefox team.

I would appreciate if this issue could start being addressed instead of ignored again, there is no doubt that this is a browser problem that requires a fix.
Status: RESOLVED → UNCONFIRMED
Resolution: DUPLICATE → ---
QA Whiteboard: [bugday-20150803]
Component: Untriaged → SVG
Product: Firefox → Core
platform-rel: --- → ?
Whiteboard: [platform-rel-Youtube]
platform-rel: ? → +
Does this issue still reproduce on Youtube? If so, we can move this to Tech Evangelism and report this to them via our channels.

It sounds like the suggested solution to this bug would be for Youtube to use `shape-rendering: crispEdges` (https://bugzilla.mozilla.org/show_bug.cgi?id=1165282#c3)
Flags: needinfo?(yonezpt)
(In reply to Mike Taylor [:miketaylr] from comment #4)
> Does this issue still reproduce on Youtube? If so, we can move this to Tech
> Evangelism and report this to them via our channels.
> 
> It sounds like the suggested solution to this bug would be for Youtube to
> use `shape-rendering: crispEdges`
> (https://bugzilla.mozilla.org/show_bug.cgi?id=1165282#c3)

Yes it does, even on the most recent Nightly.

This image comparison was taken at this moment, the video used was the same, the screenshots taken from Firefox and Chrome.

http://i.cubeupload.com/rJ6RoU.png

The controls on top are from Firefox Nightly (same problem is present on stable).

The controls below are from Chrome.

As it can clearly be observed, the blurryness persists. And as I explained in the previous reply (comment 3) in response to the crisp edges fix, quoting:

Then he suggested that the solution was to add a crispedges CSS property to the SVG elements as a mean of correcting the problem, but the fact is that it creates an even worse problem, the elements become all jagged, they loose any anti-aliasing which results in an even worse experience than the respective blur issue which it aims to fix.
Maybe the icons need 0.5 adding to their coordinates (by YouTube) per https://www.cairographics.org/FAQ/#sharp_lines
(In reply to Robert Longson from comment #6)
> Maybe the icons need 0.5 adding to their coordinates (by YouTube) per
> https://www.cairographics.org/FAQ/#sharp_lines

No, I have verified this with Chrome. Firefox does not handle the half pixel correctly while Chrome does in the same circumstances. I have even verified the icons positions in both browsers, they both have the same positions. This problem does not happen when the player is in normal mode (non-theater) since while in that mode none of the icons lay on a half pixel. This is not something YouTube has to do, this problem exists for any svg in Firefox under the same situation, outside or inside YouTube.
(In reply to yonezpt from comment #0)
> This issue has been reported before in
> https://bugzilla.mozilla.org/show_bug.cgi?id=1165282

And bug 1163366 it seems.

On youtube.com the controls have blurry edges for me in both Chrome and Firefox. Can you provide more specific instructions for reproducing this issue? OS and screen resolution, and if there is anything you need to do to get SVG controls if that doesn't happen by default nowadays.
OS: Windows 7 x64

Resolution: 2048 x 1152

As far as I know YouTube already defaults to the HTML5 player on both browsers, under the OS I am running.

By checking the buttons positions I confirmed with getClientRects that they are indeed in the exact same positions in both browsers. Example position for the resize button:

Firefox

left (or x) 1571.5px

Chrome

left 1571.5px

And in the screenshot I provided (linked here again http://i.cubeupload.com/rJ6RoU.png) it shows how the same controls in the exact same position are rendered blurry in Firefox (top) and not blurry in Chrome (bottom).
Flags: needinfo?(yonezpt)
(In reply to yonezpt from comment #9)
> Resolution: 2048 x 1152

Sorry, to be more precise I mean pixel density.
(In reply to Jonathan Watt [:jwatt] (catching up after vacation) from comment #10)
> (In reply to yonezpt from comment #9)
> > Resolution: 2048 x 1152
> 
> Sorry, to be more precise I mean pixel density.

Normal pixel density, 177 ppi
Rank: 50
Seeing that this problem has finally been confirmed in the most recent repost of this problem: https://bugzilla.mozilla.org/show_bug.cgi?id=1311464 can we finally get the status of this one verified as well so that it has better chances of getting fixed any time soon?

Also please make the recent report duplicate the main one because this report here gives the wrong idea that the problem is restricted to the YouTube controls only, when it affects all SVG rendering in any Firefox version, as the other report clearly shows.
Version: 39 Branch → 56 Branch
(In reply to yonezpt from comment #0)
> This issue has been reported before in
> https://bugzilla.mozilla.org/show_bug.cgi?id=1165282

I've just updated that bug to be a dupe of bug 608812, which is the underlying problem / possible-fix here. --> making the same update to this bug.
Status: UNCONFIRMED → RESOLVED
Closed: 9 years ago → 6 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.