使用-webkit-transform时固定的位置不起作用

我正在使用-webkit-transform（和-moz-transform / -o-transform）来旋转div。还添加了固定位置，以便div与用户一起滚动。

在Firefox中工作正常，但在基于Webkit的浏览器中却坏了。使用-webkit-transform后，固定的位置不再起作用！那怎么可能？

经过一番研究，出现了一个错误报告上的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。

编辑：截至10/24/2012，该错误尚未解决。

这似乎不是错误，而是规范的一个方面，这是由于这两种效果需要单独的坐标系和堆叠顺序。如这个答案中所解释。

该CSS变换规格解释这种行为。带有转换的元素充当固定位置后代的包含块，因此position：fixed在具有转换的对象下不再具有固定的行为。

当应用于相同元素时，它们确实起作用。元素将被定位为固定，然后进行转换。

对于那些发现自己的背景图片在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');

    });
}  

对我有用的东西（有点hacky）是position:sticky：

.fixed {
     position: sticky;
}

2016年8月，固定位置和动画/变换仍然是一个问题。对我而言唯一有效的解决方案是为子元素创建动画，而这需要花费更长的时间。

实际上，我找到了另一种解决此“错误”的方法：

我有容器元素，其中包含css3动画的页面。当页面完成动画时，css3属性的值为：transform：translate（0,0）;。因此，我刚刚删除了这一行，一切都按预期进行-位置：固定显示正确。当将css类应用于翻译页面时，将添加translation属性，并且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/

在我的phonegap项目中，webkit转换-webkit-transform：translateZ（0）; 像魅力一样运作。它已经在chrome和safari中运行，而不仅仅是移动浏览器。还有一个问题是在某些情况下WRAPPER DIV尚未完成。对于浮动DIV，我们会应用清晰的类。

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

可能是由于Chrome中的错误，因为我无法在Safari和Firefox中复制，但在Chrome 40.0.2214.111中可以正常工作http://jsbin.com/hacame/1/edit?html,css,output

这是一个非常特殊的结构，因此它绝不是一个普遍适用的单行CSS修复程序，但也许有人可以对其进行修补以使其在Safari和Firefox中运行。

在尝试使用react-swipeable-views（rsw）实现react-color时遇到了这个问题。对我来说，问题是rsw应用于translate(-100%, 0)选项卡面板，该选项卡破坏了全屏上添加的默认固定位置div，单击该默认固定位置div将关闭颜色选择器模型。

对我来说，解决方案是对固定元素应用相反的变换（在这种情况下translate(100%, 0)，此问题解决了我的问题。我不确定这在其他情况下是否有用，但我认为还是可以分享。

这是显示我上面描述的示例：

https://codepen.io/relativemc/pen/VwweEez

向-webkit-transform固定元素添加可以为我解决问题。

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

这是我在所有经过测试的浏览器和移动设备（Chrome，IE，Firefox，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%);
}

如果将变换应用于任何祖先，则元素的固定位置将被破坏。

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

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

如果您可以使用javascript作为选项，则可以将其定位为相对于窗口的位置固定元素（位于转换后的元素中）时的变通办法：

  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将基于容器来计算高度和宽度。这取决于您的用例，但这将使您可以预测地将某物位置固定为固定位置，而不管其容器是什么。

在元素变形时添加动态类。$('#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);
    }
}

现在位置：在子元素上具有top和z-index属性值时固定，可以正常工作并保持固定，直到父元素变形为止。恢复转换后，子元素将再次按固定方式弹出。如果您实际上使用的导航侧栏可以在单击时切换打开和关闭，并且应该有一个选项卡集，当您向下滚动页面时该选项卡集应该保持粘性，这应该可以缓解这种情况。

就我而言，我发现我们不能在transform：translateY（）之前使用transform：translateX（）。如果要同时使用，则应该使用transform：translate（，）。

请不要投票，因为这不是确切的答案，但可以帮助某人，因为这是关闭转换的快速方法。如果您确实不需要对父项进行转换，并且希望固定位置再次起作用：

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