Will the developer contributions extend to the website?



  • Ya I see what you are referring to.
    It's from using the CSS animation: transform: scale();
    Just tried adding: -webkit-backface-visibility: hidden; but it made it blurrier on hover.

    I was just assuming it was a subtle side effect of transform: scale();
    Thanks for the suggestion though.



  • I'm not encountering this issue but wondered if the following would make any difference as it has been mentioned a few times to stop the flickering
    <code>-webkit-transform-style: preserve-3d;</code>



  • Aww damn, thanks for trying though.



  • Thanks Scots, I tried that with no luck.
    Also tried <code>-webkit-filter: blur(0px);</code> but again it did not effect the slight blur on hover.

    Not too worried about it, but thanks for the help!



  • @PatchworkKnight I've the same smooth issue (Chrome on Windows 10)



  • I tried tackling the problem yesterday, had as much success as RainFarmer (and came across a number of the same fixes).

    From what I can tell, its a problem in how webkit animates the scale property. Webkit converts it into an image and then animates the scaling. This causes the blurriness when it tries to scale up.



  • @RainFarmer
    I think if you apply an identity 3d transform or a z-index, it'll keep the element permanently animated (in its own stacking context which may mess with your layout). Setting the opacity to 99% might work too.

    What I'm seeing is a flicker on anim begin/end between anti-aliased text (animated rendering) and sub-pixel (clear type) text - this happens because the GPU can't do sub-pixel rendering (AFAIK at least).

    In theory it'll only happen on Windows with clear type enabled and in a browser with both native text rendering and gpu acceleration support...? (Not so sure there.)

    At least I think that's what it is. Link:
    http://output.jsbin.com/efirip/5/quiet



  • On 100% zoom, the second line of detail text janks one pixel up and down during the anim
    110% - it looks like the text got a minor bold on mouse over
    125% - the last line of text janks

    Have fun! :D



  • Wow! Thanks for the research into this.
    I'll definitely try to implement this when I get a chance.

    You a web dev @SethV?



  • I'm not sure that is what the bug is but that's what it looks like.
    I'm a full stack dev - I just read a lot.


Log in to reply