固定位置在使用-webkit-transform时不起作用
我正在使用-webkit-transform（和-moz-transform / -o-transform）来旋转div。 也有位置固定添加，所以div与用户scrols。
在Firefox中，它工作正常，但是在基于webkit的浏览器中，它已经被破坏了。 使用-webkit转换后，固定的位置不再工作了！ 这怎么可能？
经过一番研究， Chromium网站上有一个关于这个问题的bug报告 ，到目前为止，Webkit浏览器不能同时把这两个效果一起渲染出来。
我build议在你的样式表中添加一些只有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日该错误尚未解决。
这似乎不是一个错误，而是规范的一个方面，因为这两个效果需要单独的坐标系统和堆叠顺序。 正如在这个答案中解释的 。
CSS转换规范解释了这种行为。 具有变换的元素充当固定位置后代的包含块，所以位置：固定在具有变换的东西下不再具有固定的行为。
他们适用于相同的元素时工作; 该元素将被定位为固定的，然后被转换。
对于任何人发现他们的背景图像正在消失在Chrome中，因为与background-attachment相同的问题：fixed; – 这是我的解决scheme：
// 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'); }); }
2016年8月，固定位置和animation/转换仍然是一个问题。 我唯一的解决scheme是为子元素创build一个需要较长时间的animation。
添加-webkit-transform到固定的元素解决了我的问题。
.fixed_element { -webkit-transform: translateZ(0); position: fixed; .... }
其实我find了解决这个“bug”的另一种方法：
我有用css3animation保存页面的容器元素。 当页面完成animation时，css3属性的值为：transform：translate（0,0）;. 所以，我刚刚删除了这一行，一切工作，因为它应该 – 位置：固定显示正常。 当CSS类被应用翻译页面时，翻译属性被添加并且css3animation也起作用。
例：
.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转换：translateZ（0）; 像魅力一样工作。 它已经在铬和Safari浏览器工作，而不是手机浏览器。 还有一个问题是WRAPPER DIV在某些情况下还没有完成。 我们在浮动DIV的情况下申请清楚的类。
<div class="Clear"></div> .Clear, .Clearfix{clear:both;}
有些东西（有点哈克），我的工作是position:sticky而不是：
.fixed { position: sticky; }
可能是由于Chrome中的一个错误，因为我无法在Safari或Firefox中进行复制，但是这可以在Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output
这是一个非常特殊的结构，所以它绝不是一个普遍适用的一行css修复，但也许有人可以修补它，以使其在Safari和Firefox的工作。
如果你真的不需要父母的转换，并且你希望你的固定职位再次工作：
#element_with_transform { -webkit-transform: none; transform: none; }
如果将变换应用于任何祖先，元素的固定位置将被打破。
<div style='position:fixed;-.*-transform:scale(2)'>...</div> //ok <div style='-.*-transform:scale(2)'> <div style='position:fixed'>...</div> // broken </div>
如果你可以使用javascript作为一个选项，这可以是一个解决scheme定位一个固定的元素相对于窗口，当它在一个转换的元素内：
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会根据它的容器计算它。 这取决于你的用例，但是这将使你可以预测地设置固定的位置，不pipe它是容器。
这里是适用于所有testing过的浏览器和移动设备（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%); }
