Question

我使用-webkit-transform（和-moz-transform / -o-transform）来旋转div。也有固定的位置，所以div与用户一起缩小。

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

Answer 1

CSS Transforms spec解释了这种行为。具有变换的元素充当固定位置后代的包含块，因此位置：固定在具有变换的某些内容下不再具有固定行为。

当应用于同一元素时，它们可以正常工作;元素将被定位为固定，然后转换。

Answer 2

经过一些研究，bug report网站上有关于此问题的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日，该错误尚未解决。

这似乎不是一个错误，而是规范的一个方面，因为这两个效果需要单独的坐标系和堆叠顺序。 As explained in this answer

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月及固定职位＆amp;动画/变换仍然是个问题。对我有用的唯一解决方案是为子元素创建一个需要更长时间的动画。

Answer 5

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

.fixed {
     position: sticky;
}

Answer 6

实际上我找到了另一种解决方法＆＃34; bug＆＃34;：

我有容器元素，用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 7

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

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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

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

以下是显示我上面描述的示例：

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

Answer 11

如果要动画返回所有平移为0的原始位置，则可以在设置transform: unset;的地方使用此解决方案：

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

Answer 12

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

Answer 13

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

如果您可以使用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 15

请不要投票，因为这不是确切的答案，但可以帮助某人，因为它只是关闭转换的快速方式。如果你真的不需要父母的转换，你希望你的固定位置再次工作：

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

Answer 16

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

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

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

Answer 17

这适用于所有经过测试的浏览器和移动设备（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%);
}

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

17 个答案: