Latest Chrome (v56) causing blur

[Chris7777]

Just a heads up, the latest Chrome (and only the latest, v56) is causing some issues with finished animations appearing blurry. 

 

I've taken a screenshot of your CDN download modal, note the code section, everything appears to be a .5px off, causing a subtle but very obvious blur.  

 

I've noticed this around the web (for example on the Stripe.com feedback page, they had a fancy animation that resulted in a similar blur), but just wanted to make you guys aware of it. 

 

 

[GreenSock]

Yeah, it does look slightly fuzzy. Thanks Chrome! From what I can tell, it's unrelated to GSAP - any percentage-based transform makes things blurry. 

 

Sheesh, Chrome used to be the best browser by far...lately they've been implementing all kinds of weird stuff that makes things look terrible or behave poorly. Another example: http://greensock.com/will-change

 

I'd encourage folks to let them know whenever you see stuff like this so that they can gauge how many people actually care. 

[Chris7777]

Yeah I totally knew it wouldn't be gsap-related. 

 

Chrome's been a pain recently - I've been working through clients who are getting the "Not secure" marker on v56 (any page that has a login/password field but no https/ssl cert gets flagged). I understand the "why" but, it feels like its shoved down our throats sometimes. 

 

I like the idea of a consistent message from users - I will report this to them. 

[PointC]

Chrome: for those who truly miss IE6, we're bringing back that top-notch, buggy functionality piece by piece. 

 

It definitely seems like they're drifting into a weird place quality-wise. I find myself going back to Firefox more and more lately.   

[Chris7777]

@PointC funny you mention Firefox - booted it up for the first time for proper-dev in yonks as the inspector in Chrome was just too slow. Firefox feels surprisingly fresh and quick. 

[Oliver16Years]

Chrome is full of bugs, and they are tend to introduce more and more. I am currently forced to use v53 because the remote debugger is not working after this version. They are loosing control of their code. The cheap workforce is unable to handle this kind of complexity and maintain the browser's reliability. This is what happening when the coders aren't dedicated enough.

Here is a couple of the unfixed issues I have found:
https://bugs.chromium.org/p/chromium/issues/detail?id=615778&can=2&start=0&num=100&q=canvas%20clip&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=

https://bugs.chromium.org/p/chromium/issues/detail?id=659253

 

+ a huge adWords one:
https://www.en.advertisercommunity.com/t5/Advanced-Features/Why-AdWords-replacing-lt-image-gt-tags-in-SVG/m-p/867486/highlight/true#M51174

[OSUblake]

I've been noticing this for a while, particularly on Windows machines. And it's not limited to Chrome. I see the same blurry text on Edge. I even see the blurriness happen when centering stuff with flexbox.

 

Lately, I've been positioning elements that contain text manually like this...

TweenLite.set(target, {
  x: containerWidth / 2 - targetWidth / 2,
  y: containerHeight / 2 - targetHeight / 2
});

[Chris7777]

I definitely see blur when I don't round off my numbers - so for example, I will always do:

TweenLite.to(foo, 1, { x: Math.round(e.target.x) });

And yeah, this has been happening for a while.

 

It just seems with the most recent update, all the little work arounds and fixes no longer work, like:

    transform: translate3d(0, 0, 0) scale(1);
    font-smoothing: antialiased;
    backface-visibility: hidden;

It's also the first time I have seen the blur on the gsap site.

 

 

I have a feeling that Google really sees the web in a very specific way - believing that it should only be text and images for a good user experience. And they're probably right for the majority of sites, as you don't want every last site spinning, and shaking, and grooving - but they need to understand there are exceptions. Movie promotion sites, game sites, etc probably have the right to be a bit more flashy. I'm working in the elearning space, and sometime it makes sense to have things animate around to demonstrate an idea or concept.

 

Anyway, at least they aren't rewrapping entire sites in a cut down frame (cough AMP, cough AMP https://www.ampproject.org/)

 

[Chris7777]

Double post - but just read your excellent article "will-change" as well the corresponding chrome bug tracker. 

So disappointing - as you said, the agent sniffing thing, man, it feels like a huge step back. 

 

For all the hate Flash got, god I miss it and its consistency

[Jonathan]

Keep in mind that you can also try adding perspective() (perspective) on either the parent of the element with the transform. Or adding transform: perspective() (transformPerspective) to the element with transform. But make sure you are using transform-style: preserve-3d. This will sometimes help correct the blurry text or image. I have found that adding either perspective on the parent or transformPerspective on the element with the transform resolves any blurriness and shake city jank. But again  this is Chrome, so what worked yesterday or even an hour ago, doesn't mean it will work going forward. Since Chrome developers have a habit of playing the fix a bug, cause another bug game. Or swapping previous bugs for new ones and vice versa groundhogs day game.

 

Also sometimes on windows PC's the windows setting ClearType can affect anti-aliasing of text in the browser. Firefox for instance will allow system anti-aliasing of ClearType to affect rendering of text, whereas Chrome used to not allow it. But like i've been saying .. Chrome is the new IE.. thank you Google