Odd change in boldness of font on Safari/Macbook Retina when scrolling

bug
1

When reading a topic using Safari on my Macbook 13" retina every time I scroll, the font boldness changes back and forth a bit. Doesn’t happen in Firefox. No plugins used.

2

This is quite terrible in Safari (all latest) I just confirmed on not retina.

There is a browser bug with css animations, you can confirm it by disabling the animations and seeing the problem go away.

.discourse-no-touch .post-cloak .gutter .reply-new {
    
    opacity: 1;
    transition: none;
}

nav.post-controls button {
    transition: none;
    
}

.discourse-no-touch .post-cloak div.actions, .discourse-no-touch .post-cloak .post-actions {
    
    opacity: 1;
    transition: none;
}

cc @awesomerobot

2 Likes
3

Anyone working on this?

4

Would it be worth using Modernizr to do feature detection for animations? I have only ever used it as a simple way to add html5 support to IE browsers, but this sounds like it might be an actual use case for it to do what it is intended for.

5

I just tested a page that loads all the Modernizr tests on Safari and it is showing it as supporting css animations and transitions. (It adds classes to the html element.)

It seems that it is possible to add tests to Modernizr. Maybe a test could be written to detect the bug and add a class based on that.

6

Nope, would love some help here.

7

Did this get solved? I’m not seeing it in Safari 8.0.3

Apparently it’s a problem with GPU compositing.

8

Nope, still see it. Safari 8.0.6.

9

Ah yes, I see it now. It actually happens on animation trigger (which happens when you scroll and your cursor is over certain elements). I think this will be an easy fix. I’ll look at this later today.

5 Likes
10

Indeed, in only happens when you start and stop scrolling.

11

Fix is in, any better?

12

Looks like it’s fixed!