search

darsain / sly

JavaScript library for one-directional scrolling with item based navigation support.
http://darsa.in/sly
2.87k stars 497 forks source link

Sly's CSS transform attribute breaks z-index flow for nested elements #258

Open sergey-dev opened 8 years ago

sergey-dev commented 8 years ago

I noticed really annoying thing, when using SLY plugin, which breaks the regular layout with z-indexes: un-fixing of fixed elements with CSS Transforms is happening. In my scenario it breaks the layout, if I had pop-up windows with position:fixed nested inside of Sly's slidee, which are poping up by "find out more" button from every item inside of slidee.

Here's the test case, to illustrate what's happening. The thing is well described here, and is a known issue.

This is because the transform creates a new local coordinate system, as per W3C spec:

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.

Unfortunately, I haven't found any applicable work-around for Webkit or Internet Explorer, unless to try to disable Sly's regular logic of shifting Slidee. The workaround is needed for Sly, which would avoid usage of transform attribute, alike: transform: translateZ(0px) translateX(-855px); and will not break the z-index flow for nested elements.