1

I have a problem of rendering in webkit browsers.

<div class="left">
    <div class="fixed"></div>
</div>
<div class="container">
    <div class="square"></div>
</div>

.left {
    position: absolute;
    top: 100px;
    left: 10px;
    width: 100px;
    height: 300px;
    background: red;
    z-index: 2;
    overflow-y: hidden;
}

.fixed {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 90px;
    z-index: 2;
    background: blue;
}

.container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 500px;
    background: grey;
    overflow-y: hidden;
     z-index: 1;
}

.square {
    margin-left: 120px;
    margin-top: 120px;
    width: 40px;
    height: 53px;
    z-index: 481;
    background: green;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    position: absolute;
}

My fixed element is not visible : http://jsfiddle.net/RV5WP/3/

But it's work if I delete the webkit transform : http://jsfiddle.net/RV5WP/2/

I tried to add translatez(0) to my fixed element or to the parent but that doesn't solved my problem.

I can't reproduce in firefox or opera.

Does anyone have an idea ?

ggomez
  • 11
  • 2
  • It's a [**bug**](https://code.google.com/p/chromium/issues/detail?id=20574) and has been asked before - [webkit css 'transform3d' + 'position: fixed' issue](http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue) and [Positions fixed doesn't work when using -webkit-transform](http://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform). I suggest trying some of the answers on those questions. – andyb Mar 25 '14 at 15:18
  • This not a problem of parent div which have the transform but it's pretty close. I already try to apply a translateZ(0) on my div. I don't want to do it in JS and no css solution works :/ – ggomez Mar 26 '14 at 15:48
  • 1
    OK, I had another look. The _fixed_ `
    ` is inside another `
    ` with `overflow-y:hidden`. Either remove the overflow or move the _fixed_ `
    ` outside of the `
    `. It doesn't really make sense to have a fixed `
    ` positioned outside of it's container when that container has an overflow set. Alternatively remove `z-index: 1;` from `.container`. Basically, the combination of `z-index` and markup is putting the _fixed_ element behind the container
     – andyb Mar 26 '14 at 16:18
  • Thank you very much ! That's work by playing with z-index. I have some behavior that forced me to put the fixed div in an another one but I finally crack it. Thank you ! :) – ggomez Mar 26 '14 at 18:19
  • @andyb, One reason to embed a fixed div within an overflow div is to preserve AngularJS scoping, where the parent div is scrollable and the fixed div is a fixed header or footer containing controls that need the parent scope. – David R Tribble Feb 17 '15 at 23:21

0 Answers0