Blink's position:fixed scrollbars bug

by rdvornov

HTML

<div id="bug">
    <div id="bug-child">should no scrollbars around me</div>
</div>
<div id="affect"></div>

CSS

BODY
{
    /*
       set padding and margin to control body's content-box
    */
    padding: 5px;
    margin: 5px;
}
#bug
{
    position: fixed;
    visibility: hidden;
    
    /*
       'auto' has the same effect, but scrollbars
       appear when content overflow container
    */
    overflow: scroll;
    

    /*
       set left or top tp 1px or greater than body's content-box
       fix the problem (hides the scrollbars)
       
       NOTE: most important that left-top corner position of #bug
       should be inside body's content-box, otherwise we got scrollbars
    */
    /*top: 11px;*/
    /*left: 11px;*/
    
    /*
       not using for z-index is also fix the problem,
       but we need to control z-index ordering
    */
    z-index: 1;
}
#bug-child
{
    visibility: visible;
    background: #FBB;
}
#affect
{
    /*
      avoid use translateZ for any descendant of body
      is also fix the problem, but we can't guarantee it
    */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}