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


(Sander Datema) #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.


(Sam Saffron) #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


(Stephan) #3

Anyone working on this?


(Simon Cossar) #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.


(Simon Cossar) #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.


(Sam Saffron) #6

Nope, would love some help here.


(Kris) #7

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

Apparently it’s a problem with GPU compositing.


(Sander Datema) #8

Nope, still see it. Safari 8.0.6.


(Kris) #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.


(Sander Datema) #10

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


(Jeff Atwood) #11

Fix is in, any better?


(Sander Datema) #12

Looks like it’s fixed!


(Sam Saffron) #13