z-index ignore overflow hidden not working

In Firefox it seems the vertical position is recalculated when the item is redisplayed from display:none (however the same bug can be seen if hover is maintained during scrol l).

Take the pain out of building site search with the Algolia hosted API.

Agop ran into an interesting scenario where he needed an element to be scrollable in one direction, while allowing the overflow in the other direction.

Youd think thats what overflow-x and overflow-y are for, but its not that simple.

Oh, of course, we used overflow: auto perhaps if we use overflow-x: visible, the horizontal overflow of the submenus will be visible.

In this case, they dont have a positioned ancestor, so theyre positioned relative to.

Then, whenever the user hovers over a menu item, we can position the submenu wrappers using a bit of JavaScript.

Now we can have as many levels of nested submenus as we want, and we wont get any undesired clipping.

They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

Whats the unearthly reason to forbid having simple combinations like visibleauto Just dont tell me its because its complicated.

Altering the behavior would break that legacy compatibility.

I get blinkyflashy artifacts on a modern iphone for example.

However, this should not end up in a modern web app without caveats (a desktop-preferred technique to).

If we cant discuss the elephant in the room, we should at least acknowledge it:-).

Couple this with visibility and you can pull your hair out in complex interactions.

Mobile menu design pattern seems to have its quirks that need to be ironed out.

With several levels of menus flying out, this seems best suited for wider screens.

I attempted to use the recommended solution technique, but found it not useful as I couldnt solve the problem of getting the submenu to be positioned according to its parent menu item.

I must use position:absolute on the submenu in order to get it display outside the bounds of the scrollable list.

To preserve the vertical position of the submenu (attached to the menu item), I use top:auto.

However, this seems to cause the browser to incorrectly position the submenu.

Chrome.

Z-Index Ignore Overflow Hidden Not Working