Youtube Tab Play Icon Corrupt.

with hardware acceleration enabled in firefox, the youtube play icon is, well, i can only describe it as looking like the side profile of an jet fighter. when i disable hardware acceleration the icon appears like the normal triangle. i have tried updating my video drivers, no success. i have reset firefox, and reinstalled. cleared all cookies, and i am at a loss. its not preventing me from watching videos, it is just an eyesore, it looks wrong. this has been going on for a week now, where before it was fine. i have an Nvidia GTX 560 Ti. 314 driver set.

with hardware acceleration enabled in firefox, the youtube play icon is, well, i can only describe it as looking like the side profile of an jet fighter. when i disable hardware acceleration the icon appears like the normal triangle. i have tried updating my video drivers, no success. i have reset firefox, and reinstalled. cleared all cookies, and i am at a loss. its not preventing me from watching videos, it is just an eyesore, it looks wrong. this has been going on for a week now, where before it was fine. i have an Nvidia GTX 560 Ti. 314 driver set.

If necessary, adjust layout.css.devPixelsPerPx starting with 1.0 in 0.1 or 0.05 steps (1.0 or 0.9) to make icons show correctly.
Use an extension to adjust the text size in the user interface and the page zoom in the browser window.

Code changes regarding HiDPI support for high resolution displays have landed in Firefox 22 and later (bug #844604).
*https://support.mozilla.org/kb/forum-response-Zoom-feature-on-Firefox-22
You can set the layout.css.devPixelsPerPx pref on the <b>about:config</b> page to 1.0 (current default value is -1.0) to restore the behavior of previous Firefox versions.
*http://kb.mozillazine.org/about:config
If necessary, adjust layout.css.devPixelsPerPx starting with 1.0 in 0.1 or 0.05 steps (1.0 or 0.9) to make icons show correctly.
Use an extension to adjust the text size in the user interface and the page zoom in the browser window.
Use this extension to adjust the font size for the user interface.
*Theme Font & Size Changer: https://addons.mozilla.org/firefox/addon/theme-font-size-changer/
You can look at the Default FullZoom Level or NoScript extension if web pages need to be adjusted after changing layout.css.devPixelsPerPx.
*Default FullZoom Level: https://addons.mozilla.org/firefox/addon/default-fullzoom-level/
*NoSquint: https://addons.mozilla.org/firefox/addon/nosquint/

Question owner

Thank you for your prompt response. i tried your suggestion. the icon appears normal when i get up to 2.0 and higher (more akin to the play icon). just to clarify my issue more, it is the new play icon that appears in the tab/title bar while playing a youtube video to let me know what tab/tabs are playing.

Thank you for your prompt response. i tried your suggestion. the icon appears normal when i get up to 2.0 and higher (more akin to the play icon). just to clarify my issue more, it is the new play icon that appears in the tab/title bar while playing a youtube video to let me know what tab/tabs are playing.

Question owner

Unfortunately, not the icon i was talking about. the small black "thing" is the icon that is not displaying correctly. normally it is a standard triangle icon to signify the video is currently playing.

Unfortunately, not the icon i was talking about. the small black "thing" is the icon that is not displaying correctly. normally it is a standard triangle icon to signify the video is currently playing.

@cor-el: The right-pointing triangle Unicode character ▶ (U+25B6) is not displayed correctly after zooming - it's only bigger but still streched horizontally.

Disabling hardware acceleration fixed the problem for the time being, but I can't find any bugs to fix this issue - 844604 seems either unrelated or causing this problem, not fixing it (I'll add comment to that bug).

@cor-el: The right-pointing triangle Unicode character ▶ (U+25B6) is not displayed correctly after zooming - it's only bigger but still streched horizontally.
'''Disabling hardware acceleration''' fixed the problem for the time being, but I can't find any bugs to fix this issue - 844604 seems either unrelated or causing this problem, not fixing it (I'll add comment to that bug).

Helpful Reply

Here's another example image showing the problem. This is from Firefox Nightly 26.0a1 (2013-08-24). Notice that in the console, when document.title is printed, the arrow character is displayed properly. It's only in the tab that the arrow becomes squished to look like a key.

Here's another example image showing the problem. This is from Firefox Nightly 26.0a1 (2013-08-24). Notice that in the console, when document.title is printed, the arrow character is displayed properly. It's only in the tab that the arrow becomes squished to look like a key.

That is a character (▶: &#x25b6;), so if this character is stretched then you may have a problem with code in userChrome.css or an extension or an issue with HiDPI support or hardware acceleration in general.

Start Firefox in Safe Mode to check if one of the extensions (Firefox/Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Firefox/Tools > Add-ons > Appearance).

That is a character (▶: &amp;#x25b6;), so if this character is stretched then you may have a problem with code in userChrome.css or an extension or an issue with HiDPI support or hardware acceleration in general.
*https://support.mozilla.org/kb/forum-response-Zoom-feature-on-Firefox-22
Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Firefox/Tools > Add-ons > Appearance).
*Do NOT click the Reset button on the Safe Mode start window.
*https://support.mozilla.org/kb/Safe+Mode
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes
----
In Firefox Safe mode these changes are effective:
*all extensions are disabled
*the default theme is used (no persona)
*userChrome.css and userContent.css are ignored
*the default toolbar layout is used (localstore-safe.rdf)
*the Javascript JIT compiler is disabled
*hardware acceleration is disabled
*plugins are not affected
*preferences are not affected

Question owner

It is directly related to the hardware acceleration, when i disable it in the options, the icon shows correctly. i tried using an older video card (radeon x1800) and even with hardware acceleration enabled, the icon was correct. i imagine it has something to do with the higher level of directx supported by my machine and card?

It is directly related to the hardware acceleration, when i disable it in the options, the icon shows correctly. i tried using an older video card (radeon x1800) and even with hardware acceleration enabled, the icon was correct. i imagine it has something to do with the higher level of directx supported by my machine and card?

The result is the attached image. Other fonts don't seem to have the issue, so it is definitely something to do with Segoe UI. You can work around the problem by overriding the tab font, with the following:

.tabbrowser-tabs .tab-text {
font-family: verdana
}

Place that in [your profile dir]\chrome\userChrome.css and restart the browser. Of course the problem now is that the tabs look different and out of place than the rest of the UI elements. You can substitute any font in place of Verdana, as long as it's not Segoe UI (apparently.)

It's using Segoe UI 12px, which it no doubt got from the Windows theme settings. I ran this from the global browser console:
[05:42:28.341] var tlabel = document.getAnonymousElementByAttribute(document.querySelector('tabs tab'), 'class', 'tab-text tab-label'); console.log(tlabel.value, getComputedStyle(tlabel).fontFamily, getComputedStyle(tlabel).fontSize)
[05:42:28.343] undefined
[05:42:28.344] "▶ RickRoll'D - YouTube" "Segoe UI" "12px"
I can also confirm that the following simple testcase reproduces the problem:
&lt;!DOCTYPE html5>
&lt;html>
&lt;body>
&lt;p style="font-family: 'Segoe UI'; font-size: 12px">&amp;#x25b6; test&lt;/p>
&lt;/body>
&lt;/html>
The result is the attached image. Other fonts don't seem to have the issue, so it is definitely something to do with Segoe UI. You can work around the problem by overriding the tab font, with the following:
.tabbrowser-tabs .tab-text {
font-family: verdana
}
Place that in [your profile dir]\chrome\userChrome.css and restart the browser. Of course the problem now is that the tabs look different and out of place than the rest of the UI elements. You can substitute any font in place of Verdana, as long as it's not Segoe UI (apparently.)

As suggested by @primate, combination of enabled Hardware acceleration in Firefox with the font "Segoe UI" used by Windows seems to be problemantic (with some graphics cards).

The font can be changed in Windows too, under Control panel -> search for "Change window colors and metrics" -> click on "Message text" and change the font.

As suggested by @primate, combination of enabled Hardware acceleration in Firefox with the font "Segoe UI" used by Windows seems to be problemantic (with some graphics cards).
The font can be changed in Windows too, under Control panel -> search for "Change window colors and metrics" -> click on "Message text" and change the font.

It seems that this might not actually be a Firefox bug. If you bump up the text size, you can see the shape of a proper arrow, just one that is particularly narrow. Viewing the same code point in the same font in Character Map shows the same glyph outline. That just seems to be how this particular font was designed, and at 12px the only has 4px to work with so it's going to look rather distorted no matter what.

Edit: Scratch that, I didn't read my own screenshot carefully enough.

It seems that Segoe UI does not have a glyph for the requested U+25B6 (BLACK RIGHT-POINTING TRIANGLE) but it does have one for U+25BA (BLACK RIGHT-POINTING POINTER), which is being substituted. Somewhere in the bowels of the font substitution code there should be a way to find a better match in a different typeface.

It seems that this might not actually be a Firefox bug. If you bump up the text size, you can see the shape of a proper arrow, just one that is particularly narrow. Viewing the same code point in the same font in Character Map shows the same glyph outline. That just seems to be how this particular font was designed, and at 12px the only has 4px to work with so it's going to look rather distorted no matter what.
Edit: Scratch that, I didn't read my own screenshot carefully enough.
It seems that Segoe UI does not have a glyph for the requested U+25B6 (BLACK RIGHT-POINTING TRIANGLE) but it does have one for U+25BA (BLACK RIGHT-POINTING POINTER), which is being substituted. Somewhere in the bowels of the font substitution code there should be a way to find a better match in a different typeface.

Helpful Reply

The font "Segoe UI Symbol" fits with the rest of the UI and fixes the icon. If you use @primate 's solution (with the userChrome.css), it fixes the icon without losing Hardware Acceleration. So, your file would look like this:

.tabbrowser-tabs .tab-text {

font-family: Segoe UI Symbol;

}

The font "Segoe UI Symbol" fits with the rest of the UI and fixes the icon. If you use @primate 's solution (with the userChrome.css), it fixes the icon without losing Hardware Acceleration. So, your file would look like this:
<code>
.tabbrowser-tabs .tab-text {
font-family: Segoe UI Symbol;
}
</code>