JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<div class="under">This element is under and has a translateZ9) transform</div>

<ul class="ontop">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

<hr />

<p>Above, in Chrome (v20.0.1096.1 dev) you should see that the scrollbar on the "Suggestion" list is displayed in the wrong location. It is displaced relative to the blur of it's <code>box-shadow</code>. If the <code>box-shadow</code>'s blur is reduced to 0 of removed altogether, the scrollbar appears in the correct place</p>
<p>Oddly, it seems to be caused by one of two CSS properties on the element(s) under the suggestion's box: <code>transform:translateZ(0)</code> and/or <code>backface-visibility:hidden</code>. If either one of these is present, it causes the issue (doesn't have to be both at once).</p>

<button id="rs">Reset</button><br />
<button id="bs">Reset &amp; Reduce Top's box-shadow blur to 0</button><br />
<button id="bv">Reset &amp; Remove Under's transform &amp; "backface-visibility: hidden"</button><br />

CSS

body {padding:10px;font-family:Arial, sans-serif; padding:10px; font-size:14px;}
p {padding:10px; line-height:1.5; }
code {font-family:monospace; color:#009; font-weight:bold;}
.under {
    padding:50px 10px;
    margin:10px;
    border:1px solid #F00;
    /* Either of these cause the problem */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-backface-visibility: hidden;
    -moz-transform: translateZ(0);
}

ul.under > * {
    display: inline-block;
    vertical-align: top;
    padding:50px;
    border:1px solid #F00;
    margin:10px;
}

ul.ontop {
    /* Scrollbar displacement is relative to this box-shadow's blur */
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    position: absolute;
    top:23px;
    left:150px;
    background-color: white;
    width:200px;
    height: 120px;
    overflow: auto;
    border: 1px solid #CCC;
}

ul.ontop > * {
    padding:10px;
}

JavaScript

var reset = function(e){
    $$('.ontop').setStyle('-webkit-box-shadow', '0 5px 15px rgba(0, 0, 0, 0.5)');
    $$('.under').setStyles({'-webkit-backface-visibility':'hidden', '-webkit-transform':'translateZ(0)'});
}
$('rs').addEvent('click',reset);

$('bs').addEvent('click',function(e){
    reset();    
    $$('.ontop').setStyle('-webkit-box-shadow', '0 5px 0px rgba(0, 0, 0, 0.5)');
});

$('bv').addEvent('click',function(e){
    reset();
    $$('.under').setStyles({'-webkit-backface-visibility':'visible', '-webkit-transform':'none'});
});