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

Question

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

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

Answer 1

如果对任何祖先应用变换，元素的固定位置就会被破坏。

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

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

Answer 2

如果您可以使用 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将根据其容器来计算它。这取决于您的用例，但这将允许您可预测地设置固定的某些位置，无论它的容器如何。

Answer 3

在元素变换时添加动态类。$('#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 属性值时，它可以正常工作并保持固定，直到父元素转换​​。当转换恢复时，子元素再次以固定状态弹出。如果您实际上使用的是在单击时打开和关闭的导航侧边栏，并且您有一个选项卡集，当您向下滚动页面时，该选项卡集应该保持粘性，这应该可以缓解这种情况。

Answer 4

就我而言，我发现我们不能在translate:translateY()之前使用transform:translateX()。如果我们想同时使用两者，我们应该使用translate:translate(,)。

Answer 5

如果您要动画回到所有翻译均为 0 的原始位置，则可以使用设置 transform: unset; 的此解决方案：

  100% {
    opacity: 1;
    visibility: visible;
    /* Use unset to allow fixed elements instead of translate3d(0, 0, 0) */
    transform: unset;
  }

Answer 6

如果你使用 React 那么你可以使用 ReactDOM.createPortal。

感谢 Porkopek 给我的小费，但我花了一些时间才弄清楚这东西是什么。
所以这就是我发现的：

如果你返回一个包装在 ReactDOM.createPortal 中的组件，那么你可以设置父元素作为第二个参数，React 会将组件附加到给定的元素，例如 position:fixed 即使作为转换后的组件的子组件也没有问题。

import ReactDOM from "react-dom";


const MyModal = () => {
    return ReactDOM.createPortal(
       <div style={{position: "fixed", top: "0", left: "0", 
                    background: "white", color: "black", 
                    padding: "3rem", zIndex: "50000"}}>
         Modal Element
       </div>,
       document.body
    )

}

在这种情况下，React 会将此组件渲染为主体的子组件，而不是父组件的子组件。

Answer 7

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

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

Answer 8

CSS 转换规范 解释了这种行为。具有变换的元素充当固定位置后代的包含块，因此具有变换的元素下的position:fixed不再具有固定行为。

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

Answer 9

经过一番研究后，错误报告出现在 < a href="http://code.google.com/chromium/" rel="noreferrer">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 日，该错误尚未解决。

---

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

Answer 10

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

.fixed {
     position: sticky;
}

Answer 11

对于那些发现自己的背景图像由于与背景附件相同的问题而在 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 12

2016年8月并固定职位&动画/变换仍然是一个问题。对我有用的唯一解决方案是为需要更长时间的子元素创建动画。

Answer 13

实际上我找到了另一种方法来修复这个“bug”：

我有一个容器元素，它保存带有 css3 动画的页面。当页面完成动画时，css3属性的值为：transform:translate(0,0);。所以，我刚刚删除了这一行，一切都按预期工作 -position:fixed 正确显示。当应用 css 类来翻译页面时，会添加 translate 属性，并且 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 14

在我的phonegap项目中，webkit转换-webkit-transform：translateZ(0);就像魅力一样。
它已经可以在 Chrome 和 Safari 中运行，但不能在移动浏览器中运行。
另外，还有一个问题是 WRAPPER DIV 在某些情况下未完成。我们在浮动 DIV 的情况下应用清晰的类。

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

Answer 15

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

对我来说，解决方案是将相反的变换应用于固定元素（在本例中 translate(100%, 0) 解决了我的问题。我不确定这在其他情况下是否有用，但我想无论如何都会分享。

这是一个显示我上面描述的内容的示例：

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

Answer 16

将固定元素设置为 transform:unset; 对我有用。

Answer 17

如果你使用 React，你可以将元素包装在 Portal 中的固定位置，这样它就可以正常工作

Answer 18

将 -webkit-transform 添加到固定元素解决了我的问题。

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

Answer 19

可能是由于 Chrome 中的错误，因为我无法在 Safari 或 Firefox 中复制，但这适用于 Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output

这是一个非常特殊的结构，因此它绝不是一个普遍适用的单行 css 修复，但是也许有人可以修改它，让它在 Safari 和 Firefox 中工作。

Answer 20

我刚刚将 transform: unset; 添加到我的固定标头中，这对我有用！

我还在 Next.js 中使用成帧器运动，并且我的固定标题也有同样的问题，这似乎很容易解决它。

.header {
    position: fixed;
    transform: unset;
}

Answer 21

以下是在所有经过测试的浏览器和移动设备（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%);
}