CSS3 element stays in place when within scrolled container #33

Open
lojjic opened this Issue Jul 17, 2010 · 1 comment

Comments

Projects
None yet
2 participants
Owner

lojjic commented Jul 17, 2010

If there is a container element with overflow:auto, and a descendant element has PIE applied, then when the content is scrolled the CSS3 rendering element will stay in place.

This seems to be worked around fairly easily by giving the scrollable container element position:relative, but would be good to find a fix if it's non-invasive.

This seems to be an issue still in less if I am doing something wrong. This does not work in IE 8 or 9. Here is a simple page I put together. Note I use the PIE.js instead of the PIE.htc but even if I still use the .htc it still does not work.

Any help would be greatly appreciated.

Sample page:

<html>
<head>


<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="PIE_uncompressed.js"></script>


<script type="text/javascript">

jQuery(document).ready(function() {
    $('.boxTest').each(function() {
    PIE.attach(this);
     });

});


</script>

<style type="text/css">

.container{
    position:relative;
    z-index:0;
    height:200px;
    width:700px;
    overflow:auto;
}

.floatedContainer{

   float:left;
   margin-left:10px;
   margin-bottom:10px;
}

.boxTest{
    position:relative;
    border: 1px solid #696;
    padding: 60px 0;
    text-align: center; 
    width: 200px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: #666 0px 6px 1px;
    -moz-box-shadow: #666 0px 6px 1px;
    box-shadow: #666 0px 6px 1px;
    background: #EEFF99;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
    background: -webkit-linear-gradient(#EEFF99, #66EE33);
    background: -moz-linear-gradient(#EEFF99, #66EE33);
    background: -ms-linear-gradient(#EEFF99, #66EE33);
    background: -o-linear-gradient(#EEFF99, #66EE33);
    background: linear-gradient(#EEFF99, #66EE33);
    -pie-background: linear-gradient(#EEFF99, #66EE33);

}


.inner{
  position:relative;
}

</style>
</head>

<body>

<div class="container">
<div class="floatedContainer">
    <div class="boxTest">
            <div class="inner"> box 1 </div>
    </div>
</div>
<div class="floatedContainer">
    <div class="boxTest">
            <div class="inner"> box 2  </div>
    </div>
</div>
<div class="floatedContainer">
    <div class="boxTest">
            <div class="inner"> box 3 </div>
    </div>
</div>
<div class="floatedContainer">
    <div class="boxTest">
            <div class="inner"> box 4 </div>
    </div>
</div>
<div class="floatedContainer">
    <div class="boxTest">
            <div class="inner"> box 5  </div>
    </div>
</div>
<div class="floatedContainer">
    <div class="boxTest">
            <div class="inner"> box 6 </div>
    </div>
</div>
<div>


</body>
</html>

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment