X
Tap here to go to the mobile version of the site.
Your Firefox is out of date and may contain a security risk! Upgrade Firefox

Support Forum

Youtube Tab Play Icon Corrupt.

Posted

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.

Additional System Details

Installed Plug-ins

  • Google Update
  • VLC media player Web Plugin 2.0.6
  • Shockwave Flash 11.8 r800
  • Next Generation Java Plug-in 10.25.2 for Mozilla browsers
  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • GEPlugin
  • 5.1.20513.0
  • Adobe PDF Plug-In For Firefox and Netscape 11.0.03
  • NPWLPG

Application

  • Firefox 23.0
  • User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0
  • Support URL: http://support.mozilla.org/1/firefox/23.0/WINNT/en-US/

Extensions

  • Adblock Plus 2.3.2 ({d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d})
  • Troubleshooter 1.1a (troubleshooter@mozilla.org)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription: NVIDIA GeForce GTX 560 Ti
  • adapterDescription2:
  • adapterDeviceID: 0x1200
  • adapterDeviceID2:
  • adapterDrivers: nvd3dumx,nvwgf2umx,nvwgf2umx nvd3dum,nvwgf2um,nvwgf2um
  • adapterDrivers2:
  • adapterRAM: 1023
  • adapterRAM2:
  • adapterVendorID: 0x10de
  • adapterVendorID2:
  • direct2DEnabled: True
  • directWriteEnabled: True
  • directWriteVersion: 6.1.7601.18126
  • driverDate: 3-14-2013
  • driverDate2:
  • driverVersion: 9.18.13.1422
  • driverVersion2:
  • info: {u'AzureCanvasBackend': u'direct2d', u'AzureFallbackCanvasBackend': u'cairo', u'AzureContentBackend': u'direct2d'}
  • isGPU2Active: False
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • webglRenderer: Google Inc. -- ANGLE (NVIDIA GeForce GTX 560 Ti )
  • windowLayerManagerType: Direct3D 10

Modified Preferences

  • browser.cache.disk.capacity: 358400
  • browser.cache.disk.smart_size.first_run: False
  • browser.cache.disk.smart_size.use_old_max: False
  • browser.cache.disk.smart_size_cached_value: 358400
  • browser.places.smartBookmarksVersion: 4
  • browser.startup.homepage_override.buildID: 20130730113002
  • browser.startup.homepage_override.mstone: 23.0
  • dom.mozApps.used: True
  • extensions.lastAppVersion: 23.0
  • network.cookie.prefsMigrated: True
  • places.history.expiration.transient_current_max_pages: 104858
  • plugin.disable_full_page_plugin_for_types: application/pdf
  • plugin.importedState: True
  • privacy.sanitize.migrateFx3Prefs: True

Misc

  • User JS: No
  • Accessibility: No
cor-el
  • Top 10 Contributor
  • Moderator
10779 solutions 97008 answers

Code changes regarding HiDPI support for high resolution displays have landed in Firefox 22 and later (bug #844604).

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.

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.

You can look at the Default FullZoom Level or NoScript extension if web pages need to be adjusted after changing layout.css.devPixelsPerPx.

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.

Question owner

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

cor-el
  • Top 10 Contributor
  • Moderator
10779 solutions 97008 answers

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

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.

Peter Hozák 0 solutions 3 answers

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

Modified by Peter Hozák

primate 0 solutions 4 answers

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.

cor-el
  • Top 10 Contributor
  • Moderator
10779 solutions 97008 answers

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.

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.

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?

primate 0 solutions 4 answers

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

cor-el
  • Top 10 Contributor
  • Moderator
10779 solutions 97008 answers

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.

primate 0 solutions 4 answers

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

Peter Hozák 0 solutions 3 answers

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.

Modified by Peter Hozák

primate 0 solutions 4 answers

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.

Modified by primate

jcreations 0 solutions 1 answers

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;

}