CODEWITHSUNDEEP
cssfonts
Michael M
Michael M

Reputation: 103

CSS: Fonts blur in Chrome when a position:fixed element overlaps a playing YouTube iframe or translate3D element

There is a font/icon-font blur (and sometimes an element flicker) when any of these 2 things happen in Chrome browsers:

  1. All fonts blur when a position fixed element overlaps a YouTube video iframe when the video is playing or if the iframe src has autoplay=1.

  2. All fonts blur when a position fixed element overlaps an element with transform3d CSS (this one can be fixed by using the 2D translate if 3D isn't needed).

This happens in Chrome browsers. And the screen resolution I'm using is a standard laptop screen (1366 x 768, 15.6 inch).

Here is a jsfiddle example, I'm using icon fonts as you can see the blur better, open the links up in the Chrome browser, and tilt your screen right back so you can see the icon font blur better. You'll see the icon fonts blur on and off when scrolling passed and over the iframe element or translation3d element.

This is the one with the YouTube iframe:

https://jsfiddle.net/71t3jjao/30/

This is the one with the translation3D element

https://jsfiddle.net/71t3jjao/22/

Any ideas how to stop this blur? I've tried many things like font-smoothing: antialiased; on the icons but doesn't fix it.

        <!-- JS Fiddle code example (bootstrap3 CSS added for glyphicon icon fonts) -->
        <div class="topbar">
           <span class="glyphicon glyphicon glyphicon-film"></span>
           <span class="glyphicon glyphicon glyphicon-th"></span>
        </div>

        <iframe src="https://www.youtube.com/embed/zTF913m8jVc?autoplay=1" width="640px" height="360px" frameborder="0"> </iframe>

        <br><br><br>Keep scrolling<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<!--CSS-->

.topbar {
    position: fixed;
    z-index: 999;
    top: 0;
    width: 100%;
    height: 51px;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    background: #fff;
}

.glyphicon {
  margin: 15px 0 0 20px;
  font-size: 12px;
}

iframe {
  margin-top: 90px;
  width: 300px;
  height: 180px;
  }
}

Upvotes: 3

Views: 1176

Answers (1)

guruguru
guruguru

Reputation: 73

Chrome works in mysterious ways and can get quite glitchy with fonts. In fact, I think there are some rendering regressions in the latest version 68.

Anyhow, a work-around solution is to add backface-visibility: hidden; to your .topbar class. In some cases this works nicely, while in others it switches over to the rendering that is more blurry, but at least you get consistency without it changing on you.

As for the flickering you mentioned, I was not able to reproduce this on my end except the topbar a couple of times maybe because of the jsFiddle wrapper.

Upvotes: 1

Related Questions