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 about:config 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/

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.

link text this is an image of what the problem is.

That is a 32x32 icon that Firefox is probably not showing at its full height:

• http://s.ytimg.com/yts/img/favicon_32-vflWoMFGx.png

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).

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 (▶: ▶), 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 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).

• 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

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?

That screenshot I posted is from a completely stock browser with no extensions installed. (Well, except for the "Feedback" extension that comes with Nightly.)

It could be a problem with the font or Firefox might be stretching the text in the tabs for other reasons.

Maybe the DOM Inspector can tell you which font is used for the tab bar label text.

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:

   <!DOCTYPE html5>
   <html>
   <body>
   <p style="font-family: 'Segoe UI'; font-size: 12px">&#x25b6; test</p>
   </body>
   </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.

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.

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;

}