Weird Webkit Issue with Position: Fixed

Weird webkit issue with position: fixed

Actually if you watch it close, in Firefox also has the same bug. The difference is that in there it show less content from the previous link. Perhaps your problem can be solved defining, in CSS, a min-height value for the divs of the links.

div#contact {
min-height:700px;
height:auto
}

After a local test I saw the real problem :). I've created a correction.css and tested in Opera 11, Safari 5, Firefox, 3.6, Firefox 4.0 beta 11 and Chrome 9 all on Mac OS X. File has this content:

html, body {height:100%;overflow:auto}/* makes the the magic trick of disappearance, disappear */
#contact {min-height:700px;height:auto}/* makes the contact div h2 closer to the top */

Positions fixed doesn't work when using -webkit-transform

After some research, there has been a bug report on the Chromium website about this issue, so far Webkit browsers can't render these two effects together at the same time.

I would suggest adding some Webkit only CSS into your stylesheet and making the transformed div an image and using it as the background.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Webkit-specific CSS here (Chrome and Safari) */

  #transformed_div {
    /* styles here, background image etc */
  }
}

So for now you'll have to do it the old fashioned way, until Webkit browsers catch up to FF.

EDIT: As of 10/24/2012 the bug has not been resolved.

---

This appears to not be a bug, but an aspect of the specification due to the two effects requiring separate coordinate systems and stacking orders. As explained in this answer.

Position fixed not working is working like absolute

The issue here lies with your .content-container wrapper class, which has a CSS declaration of webkit-transform: translate3d(0,0,0). The transform declaration, as this answer illustrates, changes the positioning context from the viewport to the rotated element, which essentially means that your fixed element behaves as if it were absolutely positioned. Here's an example showing the difference between a fixed element inside a transformed div and a fixed element outside of that div.

.rotate {  transform: rotate(30deg);  background: blue;  width: 300px;  height: 300px;  margin: 0 auto;}.fixed {  position: fixed;  background: red;  padding: 10px;  color: white;  top: 50px;}

<div class="rotate">  <div class="fixed"> I am fixed inside a rotated div.</div></div><div class="fixed"> I am fixed outside a rotated div.</div>

Chrome position:fixed and transformZ bug

I ran into this issue as well. The problem is that google maps forces GPU compositing on all it's mapping DOM elements via -webkit-transform: translateZ(0);

To fix this issue, you can force GPU compositing on all your fixed positioned elements by adding
-webkit-transform: translateZ(0); to each fixed element

jsfiddle Demo: http://jsfiddle.net/plapier/QA7tK/

Workaround for webkit overlapping glitch

I found a solution by myself. One day I thought, maybe webkit uses a different z start position. Then I tried to move the div away. And it worked.

You can apply translateZ first on your transformation to fix the bug:

.background {
    position: absolute;
    transform: rotateX(58.6297041833deg) rotate(45deg);
    -webkit-transform: translateZ(-1000px) rotateX(58.6297041833deg) rotate(45deg);
    background-color: green;
    top: 96.619312px;
    left: 3.4641016151px;
    transform-origin: right top;
    border-radius: 100px;
    width: 500px;
    height: 500px;
}

.wrapper {
    position: releative;
}

.content {
    position: relative;
}

Notice the translateZ(-1000px) on -webkit-transform

CSS position fixed strange rendering in chrome when scrolling

The cause of the issue where elements with an opacity of 0 inside the fixed element. Setting those to display: none solved the problem.

---

Related Topics