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

Question

使用-webkit-transform时，固定的位置不起作用我使用-webkit-transform（和-moz-transform / -o-transform）来旋转div。还有固定的位置，所以div与用户一起缩小。在Firefox中它工作正常，但在基于webkit的浏览器中，它已经破碎了。使用-webkit-transform后，固定的位置不再起作用！怎么可能？

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。

Answer 2

对于那些发现他们的背景图片在Chrome中消失的人，因为背景附件存在同样的问题：已修复; - 这是我的解决方案：

// run js if Chrome is being usedif(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');

    });}