jQuery插件与转换冲突：translateY

Question

Im using a lightweight jQuery plugin call leanModal

The code for the plugin is included in this jsfiddle: https://jsfiddle.net/meqtu354/2/

All the plugin does is, for example in the jsfiddle, when u click on click to show popup , the pop up show up and the rest of document get covered by a huge dark transparent div.

But for some reason when I add: transform: translateY to my css

https://jsfiddle.net/meqtu354/3/ (check the css, added two selectors)

now when you click click to show popup , the overlay (dark transparent div) cover the popup too.

I been reading this for half an hour now, but still cant figure out why

Answer 1

You need to put the popup div outside of the st-scroll class:

<div id="popup">POPUP</div>

<div class="st-scroll">

    <section></section>
    <script></script>
    <section></section>

</div>

I tried it in your fiddle and it worked. When you apply a 3d transform property, I think it merges the div as if it is one object without layers.

Answer 2

you are using adjacent selectors, but not selecting the <a href=""> you have between #st-control-1 and .st-scroll. that some how is breaking the flow of the CSS. The correct adjacent selector path is:

#st-control-1:checked ~ #st-panel-1 .st-scroll { transform: translateY(0%); -ms-transform: translate(0%); -webkit-transform: translate(0%); }

Also, use the vendor pre-fix in your css for these type of properties. hope this helps.