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

Question

我使用-webkit-transform(和-moz-transform/-o-transform)来旋转div.还有固定的位置,所以div与用户一起缩小.

在Firefox中它工作正常,但在基于webkit的浏览器中,它已经破碎了.使用-webkit-transform后,固定的位置不再起作用!怎么可能？

Answer 1

该CSS转换规范解释了这种行为.具有变换的元素充当固定位置后代的包含块,因此位置:固定在具有变换的某些内容下不再具有固定行为.

它们在应用于同一元素时确实有效; 元素将被定位为固定,然后进行转换.

Answer 2

经过一番研究,出现了一个错误报告上的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,该错误尚未解决.

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

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

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

.fixed {
     position: sticky;
}