Pure CSS dropdowns hide behind content for half a second before fully revealing!

[chrisjb]

I’ve created some simple pure CSS dropdowns. They are working nicely. However on my home page I have a slideshow below the dropdowns. I’m using some z-index to layer stuff on top of other stuff in the slideshow and overruling all of that with z-index: 999 on the drop downs.

They all work fine except the far left drop down goes underneath some slideshow content for half a second before revealing.

What do you reckon could be causing that little problem?

[unasAquila]

I am unable to see the issue on (ie10, safari, chrome or firefox) & and is not showing at all in Opera.

[chrisjb]

Ah ha I’ve fixed it. Sorry to waste your time unasAquila.

It was a lag on the transition. It only displayed the menu after the opacity transition was fully complete.

I fixed it by making it display block even when not revealed (in modern browsers), then used visibility and opacity to make it visible on hover (but still used display for older browsers).

So for anyone who has searched and found this (if ever) — use the visibility hidden and visible to avoid the transition lag causing the dropdown to not display for however long the transition is set.

[chrisjb]

How do I mark resolved?

[chrisjb]

In hindsight I should have made the 0.5s connection to realise the problem

[Author]

Posts