Agos 0

In some recent design I put some subtle CSS3 transitions (color, shadow) on :hover for the links.

Unfortunately, when (re)loading the page I see a elements (and only those) blue, then they fade (according to the aforementioned transition) to their style.
Anybody knows what could be the cause

I'll update with minimal code ASAP (I can't right now)

Thanks in advance!

1 answer

danwellman 5600

Are you using Modernisr or some other CSS3 capability detector?

If so that would explain the delay - the JS has to load, detect the browser capabilities and apply the classes. Then the classes pick up your styling.

To get around this use visibility:hidden, e.g.

body .transition-element { visibility:hidden; }
body.csstransitions .transition-element { visibility:visible; }

This way, the elements with the transitions on will still take up DOM

space, but won't be visible until Modernisr has run and applied the relevant classes...

Answered over 8 years ago by danwellman