固定位置在使用-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%); } 
  • Twitter Bootstrap文本字段的高度太小?
  • html(+ css):表示换行的首选位置
  • 引导行与不同高度的列
  • 部分与文章HTML5
  • 在工具提示中添加换行符
  • twitter引导网格系统。 列之间的间距
  • 在HTML中显示HTML代码
  • Google Maps API v3:如何删除所有标记?
  • jQuery AJAX提交表单
  • 如何使用jQuery切换我的CSS样式表?
  • 如何verticalyalignment到具有定义的宽度/高度的div的内容的中心?