Flicker when transitioning the :before element

[fooman]

I am transitioning the :before pseudo-element of a block element (link in this case). When I do so, I see adjacent links’ text flicker a bit. On my actual site, I see the adjacent links shift to the left/right a tad during transition… but I can’t get that to happen on this test-case.

This only happens to me in Chrome. Safari and FF renders everything just fine.

I have made two pens to show this issue.
The first one show it happening. The reason I’m using a :before pseudo-element is to allow for the background to be skewed without the text inside to be affected.
The :before pen

This is one using a simple transition on the background of the element, not skewed just a simple box. As you can see, it (and the adjacent links) transition just fine. No weird flicker.
No-flicker pen

So… I assume this is a bug in Chrome, or something I’m doing in CSS that is painfully obvious that I’m not seeing :(

(Also, in chrome the first pen flickers entirely when I move from link to link. Not sure why)

Any help would be awesome possum!!!

[paulob]

Hi,

Try adding -webkit-backface-visibility:hidden; to the before rule and it should stop the flicker.

[fooman]

Fixed! Not sure why tho, so I’ll head over to Google and see what’s up.

[Author]

Posts