1

I've got an icon font blur problem (and element flicker) when there is an element using transform animation. This seems to be a known bug with the Chrome browser, one mention of it is here: https://forum.webflow.com/t/a-fix-for-when-your-elements-move-up-and-or-blur-during-animations-interactions-on-chrome/11629

Here is a jsfiddle example, open it up in Chrome, and tilt your screen right back so you can see the icon font blur better. https://jsfiddle.net/71t3jjao/3/

Code example:

    <head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
        .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;
        }

        .animation {
            width: 400px;
            height: 200px;
            background: #aaa;
            transform: translate3d(339px, 0px, 0px);
        }
    </style>               
    </head>

    <body>
        <div class="topbar">
        <span class="glyphicon glyphicon glyphicon-film" aria-hidden="true"></span>
        <span class="glyphicon glyphicon glyphicon-th" aria-hidden="true"></span>
        </div>
        <div class="animation"></div>

        <br />scroll past animation element to see icons blur<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 />
    </body>

(On my site, the icon blur is more noticeable I think because I'm using a different icon set).

You'll see the icon fonts blur on the top navigation element which is a position: fixed; top: 0; width: 100%; z-index: 99999; element. These icon fonts in the topbar blur when the carousel element is not visible on the screen by scrolling past it.

Any ideas how to fix this icon font blur? I've tried many things like font-smoothing: antialiased; on the icons but doesn't fix it. My topbar element also needs to stay as it is with a position: fixed and with a z-index higher than all other elements. Any help much appreciated.

  • Is there any reason why you're using 3D transformation? Using 2D transformation seems to fix the issue: `transform: translate(339px, 0px);` – Terry Aug 09 '17 at 11:21
  • Thanks for your comment. That does indeed fix it. I'm using a carousel slider plugin, which uses translate3D(), I'll try contact the plugin developer to change it to this if the translate3D() is not needed. Otherwise I could edit the plugin js file and update it when there is a plugin upgrade. –  Aug 09 '17 at 11:31
  • Since using 3D transform offloads things to the GPU so that the browser uses hardware compositing, it improves performance: perhaps that is the reason why the plugin authors used `transform3d` even though it is not being translated/moved in the z-axis. – Terry Aug 09 '17 at 11:33

0 Answers0