4 ms·

Webkit Hardware acceleration bleeding into subsequent elements. How to fix it

21 points by a4agarwal 15y ago

pavel_lishin 15y ago
I could not actually spot the difference between the unaliased and aliased text. Maybe I need a retina display to see the difference?
- drivebyacct2 15y ago
  I can clearly see the difference on my 1080p 23" monitor, 1680x1050 21" and my MBP screen. Not anything real special.
- leviathant 15y ago
  On my machine, both images in the first screen shot appear to have anti-aliased text, but the anti-aliasing is different. In fact, the text that says "Not anti-aliased" appears to have softer edges on the 'd' character at the end of the line than the 'd' at the end of the "Anti-Aliased" text.
- barrkel 15y ago
  The closer I look, the harder it is to see (unless you zoom into the pixels and look at the colour fringing). But just glancing, it's clear to me that the "Anti-aliased" text has a distinctly fuzzy outline, while the "Not anti-aliased" text appears much more crisply. At a glance, and as a Windows user, I prefer the "Not anti-aliased" rendering; as the article says, it is actually anti-aliased, just not sub-pixel anti-aliased. With the text size so large, I don't think sub-pixel anti-aliasing is doing it much favours.
drivebyacct2 15y ago
I wonder if this explains why lots of websites using fancy new web fonts look absolutely hideous in my Chrome (I have a lot of the experimental acceleration options turned on). I accept responsibility for it, but the results can be shockingly off putting. Sadly I can't think of an example to post a screenshot of. I'll be on the lookout.
- sibsibsib 15y ago
  are you on windows? I find this happens on windows more so than mac. I believe its a combination of bad hinting combined with Microsoft's very crisp font smoothing. Windows can really mess with the kerning as well...
  - drivebyacct2 15y ago
    No, I'm in Ubuntu. In Windows I leave the about:flags alone since I use it so rarely.
    - pak 15y ago
      Fonts in Ubuntu can be absolutely unpredictable when it comes rendering time. I remember an install of msttcore-fonts that I thought would allow me to see sites built with Verdana, Tahoma, etc. similarly to Chrome on a windows box. Not even close, and I'm talking about the kerning, not even the subpixel quality. IIRC as sibsib said windows takes major liberties with the kerning to keep its core fonts on the pixel grid, and if msttcore-fonts are hinted, they sure don't come out at all similar to the windows versions.
      - drivebyacct2 15y ago
        Not anymore. My fonts in Ubuntu are gorgeous and consistent everywhere except some Java applications, and even then Eclipse hasn't given me trouble for several releases of Ubuntu. I know Mac users drool over their fonts, and as an owner and heavy user of my MBP, I much, much prefer Ubuntu's font rendering to OS X's and ClearType. This is something very, very different. It's only on specific sites and it's only in Chrome when I have the hardware acceleration turned on.
    - naner 15y ago
      I wasn't even aware hardware acceleration in Chrome worked on Linux.

21 points by a4agarwal 15y ago

I could not actually spot the difference between the unaliased and aliased text. Maybe I need a retina display to see the difference?

drivebyacct2 15y ago
I can clearly see the difference on my 1080p 23" monitor, 1680x1050 21" and my MBP screen. Not anything real special.
leviathant 15y ago
On my machine, both images in the first screen shot appear to have anti-aliased text, but the anti-aliasing is different. In fact, the text that says "Not anti-aliased" appears to have softer edges on the 'd' character at the end of the line than the 'd' at the end of the "Anti-Aliased" text.
barrkel 15y ago
The closer I look, the harder it is to see (unless you zoom into the pixels and look at the colour fringing). But just glancing, it's clear to me that the "Anti-aliased" text has a distinctly fuzzy outline, while the "Not anti-aliased" text appears much more crisply. At a glance, and as a Windows user, I prefer the "Not anti-aliased" rendering; as the article says, it is actually anti-aliased, just not sub-pixel anti-aliased. With the text size so large, I don't think sub-pixel anti-aliasing is doing it much favours.

drivebyacct2 15y ago

I wonder if this explains why lots of websites using fancy new web fonts look absolutely hideous in my Chrome (I have a lot of the experimental acceleration options turned on). I accept responsibility for it, but the results can be shockingly off putting. Sadly I can't think of an example to post a screenshot of. I'll be on the lookout.

sibsibsib 15y ago
are you on windows? I find this happens on windows more so than mac. I believe its a combination of bad hinting combined with Microsoft's very crisp font smoothing. Windows can really mess with the kerning as well...
- drivebyacct2 15y ago
  No, I'm in Ubuntu. In Windows I leave the about:flags alone since I use it so rarely.
  - pak 15y ago
    Fonts in Ubuntu can be absolutely unpredictable when it comes rendering time. I remember an install of msttcore-fonts that I thought would allow me to see sites built with Verdana, Tahoma, etc. similarly to Chrome on a windows box. Not even close, and I'm talking about the kerning, not even the subpixel quality. IIRC as sibsib said windows takes major liberties with the kerning to keep its core fonts on the pixel grid, and if msttcore-fonts are hinted, they sure don't come out at all similar to the windows versions.
    - drivebyacct2 15y ago
      Not anymore. My fonts in Ubuntu are gorgeous and consistent everywhere except some Java applications, and even then Eclipse hasn't given me trouble for several releases of Ubuntu. I know Mac users drool over their fonts, and as an owner and heavy user of my MBP, I much, much prefer Ubuntu's font rendering to OS X's and ClearType. This is something very, very different. It's only on specific sites and it's only in Chrome when I have the hardware acceleration turned on.
  - naner 15y ago
    I wasn't even aware hardware acceleration in Chrome worked on Linux.