Skip to content
This repository has been archived by the owner on Apr 20, 2023. It is now read-only.

CSS3 element stays in place when within scrolled container #33

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

CSS3 element stays in place when within scrolled container #33

lojjic opened this issue Jul 17, 2010 · 1 comment

Comments

@lojjic
Copy link
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.

@jsmithFI
Copy link

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 subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants