jquery plugin conflict with transform: translateY
<p>Im using a lightweight jQuery plugin call leanModal</p>

<p>The code for the plugin is included in this jsfiddle:
<a href="https://jsfiddle.net/meqtu354/2/" rel="nofollow">https://jsfiddle.net/meqtu354/2/</a></p>

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

<p>But for some reason when I add: <code>transform: translateY</code> to my css</p>

<p><a href="https://jsfiddle.net/meqtu354/3/" rel="nofollow">https://jsfiddle.net/meqtu354/3/</a> (check the css, added two selectors)</p>

<p>now when you click <code>click to show popup</code>, the overlay (dark transparent div) cover the popup too.</p>

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