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

**URL:** <https://meta.discourse.org/t/odd-change-in-boldness-of-font-on-safari-macbook-retina-when-scrolling/23605>\
**Category:** Bug\
**Created:** [2015 年1 月 2 日 11:28 UTC](https://meta.discourse.org/t/odd-change-in-boldness-of-font-on-safari-macbook-retina-when-scrolling/23605 "2015-01-02T11:28:16Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sander78](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sander78/32/296615_2.png) [@Sander78](https://meta.discourse.org/u/Sander78)\
**Post date:** [2015 年1 月 2 日 11:28 UTC](https://meta.discourse.org/t/odd-change-in-boldness-of-font-on-safari-macbook-retina-when-scrolling/23605/1 "2015-01-02T11:28:16Z")

</div>

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.

https://www.youtube.com/embed/6E7qBjx-UXs?feature=oembed&wmode=opaque

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2015 年1 月 3 日 11:07 UTC](https://meta.discourse.org/t/odd-change-in-boldness-of-font-on-safari-macbook-retina-when-scrolling/23605/2 "2015-01-03T11:07:32Z")

</div>

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.

```plaintext
.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

---

<div class="post-metadata">

**Author:** ![stephan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephan/32/103320_2.png) [@stephan](https://meta.discourse.org/u/stephan)\
**Post date:** [2015 年5 月 1 日 17:21 UTC](https://meta.discourse.org/t/odd-change-in-boldness-of-font-on-safari-macbook-retina-when-scrolling/23605/3 "2015-05-01T17:21:54Z")

</div>

Anyone working on this?

---

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [2015 年5 月 1 日 17:59 UTC](https://meta.discourse.org/t/odd-change-in-boldness-of-font-on-safari-macbook-retina-when-scrolling/23605/4 "2015-05-01T17:59:45Z")

</div>

Would it be worth using [Modernizr](http://modernizr.com/docs/) 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.

---

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [2015 年5 月 1 日 18:34 UTC](https://meta.discourse.org/t/odd-change-in-boldness-of-font-on-safari-macbook-retina-when-scrolling/23605/5 "2015-05-01T18:34:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2015 年5 月 1 日 21:15 UTC](https://meta.discourse.org/t/odd-change-in-boldness-of-font-on-safari-macbook-retina-when-scrolling/23605/6 "2015-05-01T21:15:27Z")

</div>

Nope, would love some help here.

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2015 年5 月 28 日 13:42 UTC](https://meta.discourse.org/t/odd-change-in-boldness-of-font-on-safari-macbook-retina-when-scrolling/23605/7 "2015-05-28T13:42:37Z")

</div>

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

Apparently it’s a problem with GPU compositing.

> <https://stackoverflow.com/questions/9733011/safari-changing-font-weights-when-unrelated-animations-are-running>

---

<div class="post-metadata">

**Author:** ![Sander78](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sander78/32/296615_2.png) [@Sander78](https://meta.discourse.org/u/Sander78)\
**Post date:** [2015 年5 月 28 日 13:57 UTC](https://meta.discourse.org/t/odd-change-in-boldness-of-font-on-safari-macbook-retina-when-scrolling/23605/8 "2015-05-28T13:57:13Z")

</div>

Nope, still see it. Safari 8.0.6.

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2015 年5 月 28 日 14:00 UTC](https://meta.discourse.org/t/odd-change-in-boldness-of-font-on-safari-macbook-retina-when-scrolling/23605/9 "2015-05-28T14:00:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sander78](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sander78/32/296615_2.png) [@Sander78](https://meta.discourse.org/u/Sander78)\
**Post date:** [2015 年5 月 28 日 14:16 UTC](https://meta.discourse.org/t/odd-change-in-boldness-of-font-on-safari-macbook-retina-when-scrolling/23605/10 "2015-05-28T14:16:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2015 年5 月 29 日 05:04 UTC](https://meta.discourse.org/t/odd-change-in-boldness-of-font-on-safari-macbook-retina-when-scrolling/23605/11 "2015-05-29T05:04:49Z")

</div>

Fix is in, any better?

---

<div class="post-metadata">

**Author:** ![Sander78](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sander78/32/296615_2.png) [@Sander78](https://meta.discourse.org/u/Sander78)\
**Post date:** [2015 年5 月 29 日 11:04 UTC](https://meta.discourse.org/t/odd-change-in-boldness-of-font-on-safari-macbook-retina-when-scrolling/23605/12 "2015-05-29T11:04:50Z")

</div>

Looks like it’s fixed!

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2015 年5 月 29 日 11:14 UTC](https://meta.discourse.org/t/odd-change-in-boldness-of-font-on-safari-macbook-retina-when-scrolling/23605/13 "2015-05-29T11:14:31Z")

</div>