4 ms·

Subpixel animation differences on browsers

12 points by bpierre 13y ago

aparadja 13y ago
Can someone explain what we're supposed to see here? Why is this interesting? I'm genuinely curious.
- duiker101 13y ago
  I THINK(but I am not sure because I didn't look too much) that what is going on is that those balls are moving at high speed by small amounts with css and what wants to be demonstrated is how different browser render floating points pixel values. I think. I might be wrong.
  - lotsofcows 13y ago
    I think you're right but I'm more interested in all the cool cognitive/visual artefacts they're causing!
  - basch 13y ago
    http://en.wikipedia.org/wiki/Subpixel_rendering http://en.wikipedia.org/wiki/Subpixel_rendering
- nekgrim 13y ago
  I can't find any difference in Chrome, but in FF there's a visible difference between the renderings.
  - MrBuddyCasino 13y ago
    Confirmed. Smooth & nice in Chrome, but not in FF.
    - ryanpetrich 13y ago
      Chrome is a bit jittery, but only on text in the vertical dimension. Safari does not have the same problem, but the text doesn't appear as clear.
    - basch 13y ago
      It's the opposite. Chrome doesn't support the feature (especially if youre using canvas), you CAN see the difference in FF. Chrome isnt smooth, it's jaggy. Think of sub-pixel rendering as anti-aliasing for fonts.
      - MrBuddyCasino 13y ago
        Ok, I get what you mean, but it certainly isn't jaggy. I'm running Chrome 31 on a MBP Maverick.
        basch 13y ago
        Chromes font rendering is very jaggy compared to firefox (which is almost certainly using Windows ClearType.) Do you have subpixel font rendering enabled in OSX? Are there settings?
        triptychs 13y ago
        (My use: MBPr, Mavericks, Chrome Dev vs. Firefox 25.0.1) I'll confirm there is a demonstrable difference between the two browsers, to my eye, being that in Chrome the odd numbers don't animate and in Firefox they do. However, I'd like to add that both are equally smooth and antialiased for me. I'd also like to point out that Chrome font rendering can be smoothed/"crisped" by using in your CSS: -webkit-font-smoothing: antialiased; -webkit-backface-visibility: hidden; for future reference. (Note: this CSS example does not hold any bearing on the OP's example. For whatever reason, both fonts are equally smooth for me.) Further, yes there are also settings in OSX for font smoothing. In System Preferences > General > Last checkbox is to enable/disable font smoothing.
Achshar 13y ago
LAtest IE and Chrome seem to be fine. FF (25) seems to be jittery on both. No Idea why that is though.
- karka91 13y ago
  I'm getting the opposite. Chrome is jittery on both and firefox smoothes out the sub pixel animation quite nicely. I'm using Ubuntu
bpierre 13y ago
Some information about rendering issue on Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=739176 https://bugzilla.mozilla.org/show_bug.cgi?id=739176
jasonkester 13y ago
This is another example of how web development hasn't changed at all from its state in 1996. At least, the part where you need specific code paths for every web browser that you want to support. It's sad, really. We've had HTML5 sold as the holy grail where you get to write your code to The Standard and it will work the same everywhere. Except The Standard is open enough to interpretation that no two browsers implement the same thing exactly the same way. And little bugs in one browser's implementation mean you can't rely on individual features, to the point where most features have to be either crossed off your wishlist or worked around. It was the same when the DOM and CSS changes came in around the turn of the century, and all you need do was code to The Standard and everything would work everywhere. (But then Netscape 6 came out and couldn't even render netscape.com anymore.) The saddest part is that this same demo could have been written in Flash (a 15 year old version of it if we wanted), and it would run not only on every major browser in existence, but also faster and smoother by pretty much any benchmark you care to name. Don't get me wrong, I still have my bet squarely on HTML5, and I really really want the browser vendors to get their shiz together. But as a front-end developer I've personally been waiting seventeen years for it. And it seems as far away today as it ever has.
- coldtea 13y ago
  >This is another example of how web development hasn't changed at all from its state in 1996. At least, the part where you need specific code paths for every web browser that you want to support. Well, it very much changed in the way that these differences are much smaller that they used to be, and for far less basic stuff. I've been in 1997 and in 1999 and in 2002. It's not like that time at all.
moron4hire 13y ago
Firefox apparently has a lot of issues with subpixels. I notice a very serious lag, about 1 or 2 whole seconds, between the end of a scroll and the text kn the page finally settling into its proper rendering.

12 points by bpierre 13y ago

aparadja 13y ago

Can someone explain what we're supposed to see here? Why is this interesting? I'm genuinely curious.

duiker101 13y ago
I THINK(but I am not sure because I didn't look too much) that what is going on is that those balls are moving at high speed by small amounts with css and what wants to be demonstrated is how different browser render floating points pixel values. I think. I might be wrong.
- lotsofcows 13y ago
  I think you're right but I'm more interested in all the cool cognitive/visual artefacts they're causing!
- basch 13y ago
  http://en.wikipedia.org/wiki/Subpixel_rendering http://en.wikipedia.org/wiki/Subpixel_rendering
nekgrim 13y ago
I can't find any difference in Chrome, but in FF there's a visible difference between the renderings.
- MrBuddyCasino 13y ago
  Confirmed. Smooth & nice in Chrome, but not in FF.
  - ryanpetrich 13y ago
    Chrome is a bit jittery, but only on text in the vertical dimension. Safari does not have the same problem, but the text doesn't appear as clear.
  - basch 13y ago
    It's the opposite. Chrome doesn't support the feature (especially if youre using canvas), you CAN see the difference in FF. Chrome isnt smooth, it's jaggy. Think of sub-pixel rendering as anti-aliasing for fonts.
    - MrBuddyCasino 13y ago
      Ok, I get what you mean, but it certainly isn't jaggy. I'm running Chrome 31 on a MBP Maverick.
      - basch 13y ago
        Chromes font rendering is very jaggy compared to firefox (which is almost certainly using Windows ClearType.) Do you have subpixel font rendering enabled in OSX? Are there settings?
        triptychs 13y ago
        (My use: MBPr, Mavericks, Chrome Dev vs. Firefox 25.0.1) I'll confirm there is a demonstrable difference between the two browsers, to my eye, being that in Chrome the odd numbers don't animate and in Firefox they do. However, I'd like to add that both are equally smooth and antialiased for me. I'd also like to point out that Chrome font rendering can be smoothed/"crisped" by using in your CSS: -webkit-font-smoothing: antialiased; -webkit-backface-visibility: hidden; for future reference. (Note: this CSS example does not hold any bearing on the OP's example. For whatever reason, both fonts are equally smooth for me.) Further, yes there are also settings in OSX for font smoothing. In System Preferences > General > Last checkbox is to enable/disable font smoothing.

Achshar 13y ago

LAtest IE and Chrome seem to be fine. FF (25) seems to be jittery on both. No Idea why that is though.

karka91 13y ago
I'm getting the opposite. Chrome is jittery on both and firefox smoothes out the sub pixel animation quite nicely. I'm using Ubuntu

bpierre 13y ago

Some information about rendering issue on Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=739176 https://bugzilla.mozilla.org/show_bug.cgi?id=739176

jasonkester 13y ago

This is another example of how web development hasn't changed at all from its state in 1996. At least, the part where you need specific code paths for every web browser that you want to support. It's sad, really. We've had HTML5 sold as the holy grail where you get to write your code to The Standard and it will work the same everywhere. Except The Standard is open enough to interpretation that no two browsers implement the same thing exactly the same way. And little bugs in one browser's implementation mean you can't rely on individual features, to the point where most features have to be either crossed off your wishlist or worked around. It was the same when the DOM and CSS changes came in around the turn of the century, and all you need do was code to The Standard and everything would work everywhere. (But then Netscape 6 came out and couldn't even render netscape.com anymore.) The saddest part is that this same demo could have been written in Flash (a 15 year old version of it if we wanted), and it would run not only on every major browser in existence, but also faster and smoother by pretty much any benchmark you care to name. Don't get me wrong, I still have my bet squarely on HTML5, and I really really want the browser vendors to get their shiz together. But as a front-end developer I've personally been waiting seventeen years for it. And it seems as far away today as it ever has.

coldtea 13y ago
>This is another example of how web development hasn't changed at all from its state in 1996. At least, the part where you need specific code paths for every web browser that you want to support. Well, it very much changed in the way that these differences are much smaller that they used to be, and for far less basic stuff. I've been in 1997 and in 1999 and in 2002. It's not like that time at all.

moron4hire 13y ago

Firefox apparently has a lot of issues with subpixels. I notice a very serious lag, about 1 or 2 whole seconds, between the end of a scroll and the text kn the page finally settling into its proper rendering.