当使用固定位置不起作用-webkit-变换当使用固定位置不起作用-webkit-变换(Positio

我使用的WebKit的变换（和-moz-变换/ -o变换）旋转一个div。 同时也有固定的位置，从而增加股利scrols打倒用户。

在Firefox它工作正常，但在基于WebKit浏览器是坏了。 使用后-webkit-变换，固定不工作的位置！ 这怎么可能？

Answer 1:

经过一番研究，出现了一个错误报告上的Chromium网站上关于这个问题，到目前为止Webkit的浏览器无法对这两种效应一起在同一时间呈现。

我建议增加一些Webkit的只是将CSS样式表，使转换后的div的图像，并用它作为背景。

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

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

所以，现在你必须做的老式方法，直到WebKit浏览器赶上FF。

编辑：作为2012年10月24日的bug问题一直没有解决。

---

这似乎不是一个问题，但本说明书中的，由于两个效果的方面需要单独的坐标系统和堆叠的订单。 正如这个答案解释 。

Answer 2:

该CSS转换规范解释了这种行为。 与变换元件充当用于固定位置的后代包含块，所以位置是：固定下的东西与变换不再有固定行为。

当应用于同一个元素他们做的工作; 为固定的元件将被定位，然后转化。

Answer 3:

对于任何人谁发现他们的背景图像，因为同样的问题与背景附件的消失在Chrome：固定; - 这是我的解决方案：

// run js if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    // set background-attachment back to the default of 'scroll'
    $('.imagebg').css('background-attachment', 'scroll');

    // move the background-position according to the div's y position
    $(window).scroll(function(){

        scrollTop = $(window).scrollTop();
        photoTop = $('.imagebg').offset().top;
        distance = (photoTop - scrollTop);
        $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');

    });
}  

Answer 4:

2016年8月和固定的位置和动画/转换仍是一个问题。 这工作对我来说唯一的解决办法 - 是创建为需要较长时间的子元素的动画。

Answer 5:

为我工作的东西（有点哈克）是position:sticky来代替：

.fixed {
     position: sticky;
}

Answer 6:

其实我发现了另一种方式来解决这个“错误”：

我有与CSS3动画持有页容器元素。 当页面完成动画时，CSS3属性有值：转换：转换（0,0）;. 所以，我只是删除这一行，和一切工作，因为它应该 - 位置：正常显示固定。 当应用CSS类网页翻译，翻译属性添加和CSS3动画工作过。

例：

.page {
     top: 50px;
     position: absolute;
     transition: ease 0.6s all;
     /* -webkit-transform: translate(0, 0); */
     /* transform: translate(0,0); */
 }
 .page.hide {
     -webkit-transform: translate(100%, 0);
     transform: translate(-100%, 0);    
 }

演示： http://jsfiddle.net/ZWcD9/

Answer 7:

添加-webkit-transform到固定元件解决了这个问题对我来说。

.fixed_element {
   -webkit-transform: translateZ(0);
   position: fixed;
   ....
} 

Answer 8:

在我的PhoneGap项目WebKit的变换-webkit-变换：translateZ（0）; 工作就像一个魅力。 它已经在Chrome和Safari不只是手机浏览器的工作。 还可以有一个更的问题是WRAPPER的DIV不是在某些情况下完成的。 我们在浮动的DIV的情况下适用明确的阶级。

<div class="Clear"></div> .Clear, .Clearfix{clear:both;}

Answer 9:

可能是由于浏览器的错误，因为我不能在Safari浏览器火狐也不复制，但这个工程在Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output

这是一个非常特别的结构，所以它绝不是一个普遍适用的一个成荫的CSS修复，但也许有人能够修改它得到它在Safari和Firefox的工作。

Answer 10:

这里是什么对我的作品在所有测试的浏览器和移动设备（浏览器，IE，火狐，Safari浏览器的iPad，iPhone 5和6，Android的）。

img.ui-li-thumb {
    position: absolute;
    left: 1px;
    top: 50%;

    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

Answer 11:

如果你申请转换为任何祖先元素的固定位置被打破。

<div style='position:fixed;-.*-transform:scale(2)'>...</div> //ok

<div style='-.*-transform:scale(2)'>
      <div style='position:fixed'>...</div> // broken
</div>

Answer 12:

如果你可以使用JavaScript作为一个选项，这可能是一个位置固定的元素relavtive定位到窗口时，它的变换元件内部的解决方法：

  let fixedEl // some node that you is position 
              // fixed inside of an element that has a transform

  const rect = fixedEl.getBoundingClientRect()
  const distanceFromWindowTop = rect.top
  const distanceFromWindwoLeft = rect.left
  let top = fixedEl.offsetTop
  let left = fixedEl.offsetLeft

  if(distanceFromWindowTop !== relativeTop) {
    top = -distanceFromWindowTop
    fixedEl.style.top = `${top}px`
  }

  if(distanceFromWindowLeft !== relativeLeft) {
    left = -distanceFromWindowLeft
    fixedEl.style.left = `${left}px`
  }

诚然，你也将不得不调整自己的高度和宽度，因为fixedEl将计算它与基于它的容器。 这取决于你的使用情况，但是这将允许您设置可预见的固定位置的东西，不管它的容器。

Answer 13:

请不要了投票，因为这是不准确的答案，但能帮助别人，因为它只是关闭改造快速的方式。 如果你真的不需要父改造和你希望你的固定位置再次合作：

#element_with_transform {
  -webkit-transform: none;
  transform: none;
}

Answer 14:

添加动态类，而该元素转变。 $('#elementId').addClass('transformed') 然后继续在CSS中声明，

.translatX(@x) { 
     -webkit-transform: translateX(@X); 
             transform: translateX(@x);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

然后

#elementId { 
      -webkit-transform: none; 
              transform: none;
}

然后

.transformed {
    #elementId { 
        .translateX(@neededValue);
    }
}

您现在的位置：当一个子元素的顶部和z-index属性值提供固定只是做工精细，并保持固定，直到父元素转变。 当转换功能恢复的子元素持久性有机污染物再次固定。 这应该如果你实际上是使用导航侧边栏切换打开和关闭时点击宜生的情况，你有一个选项卡集，你向下滚动页面应该留粘。

文章来源: Positions fixed doesn't work when using -webkit-transform