maban/styleguides

Hover transforms on resource modules causing lag + flickering

Closed this issue · 6 comments

joelparr commented

Not sure if it's lack of GPU-enabled rendering or what, but if I hover over any of the resource module boxes (each li.resource) there is a distinct lag before the scale transform kicks in and the content of every

  • flickers, making even scrolling through hand exploring the resources seem super janky on my machine.

    Safari Version 8.0 (10600.1.25) on Yosemite 10.10 on a late 2013 13" Retina MBP.

    PS. Thanks again or the great resource.

    • brendanfalkowski commented

    Hi Joel, unfortunately that's just Safari being a lame duck. The flickering happens when elements are promoted or demoted to GPU rendered layers as when transitions are applied. Most browsers get this right (including Mobile Safari) but WebKit for Safari Mac has always been wonky with rendering.

    Looks like the GH Pages template was only coded for WebKit (d'oh) so you won't see the transitions in Firefox or IE.

    joelparr commented

    Yeah, understood. If you want to take the slightly hacky route, making each li.resource a block element with -webkit-transform set to translateZ(0) (since we don't have to worry about FF or IE!) seems to pull safari nicely into line for me.

    brendanfalkowski commented

    Just added the other vendor-prefixes but it looks like Safari is still janky.

    maban commented

    I added a fix this morning: cd8ad6d – same thing?

    joelparr commented

    Yep, that's the one.

    brendanfalkowski commented

    Ah, right. translate3d on the element not the state. Good catch Anna!