Html 使用 -webkit-transform 时，位置固定不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2637058/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Positions fixed doesn't work when using -webkit-transform
提问by iSenne
I am using -webkit-transform (and -moz-transform / -o-transform) to rotate a div. Also have position fixed added so the div scrols down with the user.
我正在使用 -webkit-transform（和 -moz-transform / -o-transform）来旋转 div。还添加了位置固定，以便 div 与用户一起向下滚动。
In Firefox it works fine, but in webkit based browsers it's broken. After using the -webkit-transform, the position fixed doesn't work anymore! How is that possible?
在 Firefox 中它工作正常，但在基于 webkit 的浏览器中它坏了。使用 -webkit-transform 后，固定的位置不再起作用！这怎么可能？
采纳答案by Kyle
After some research, there has been a bug reporton the Chromiumwebsite about this issue, so far Webkit browsers can't render these two effects together at the same time.
经过一番研究，Chromium网站上有一个关于这个问题的错误报告，目前 Webkit 浏览器无法同时渲染这两种效果。
I would suggest adding some Webkit only CSS into your stylesheet and making the transformed div an image and using it as the background.
我建议在样式表中添加一些仅 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 */
}
}
So for now you'll have to do it the old fashioned way, until Webkit browsers catch up to FF.
所以现在你必须用老式的方式来做，直到 Webkit 浏览器赶上 FF。
EDIT: As of 10/24/2012 the bug has not been resolved.
编辑：截至 2012 年 10 月 24 日，该错误尚未解决。
This appears to not be a bug, but an aspect of the specification due to the two effects requiring separate coordinate systems and stacking orders. As explained in this answer.
这似乎不是错误，而是规范的一个方面，因为这两种效果需要单独的坐标系和堆叠顺序。如本答案所述。
回答by smfr
The CSS Transforms specexplains this behavior. Elements with transforms act as a containing block for fixed position descendants, so position:fixed under something with a transform no longer has fixed behavior.
该CSS变换规格解释这种行为。带有变换的元素充当固定位置后代的包含块，因此带有变换的元素下的 position:fixed 不再具有固定行为。
They do work when applied to the same element; the element will be positioned as fixed, and then transformed.
当应用于同一个元素时，它们确实起作用；元素将被定位为固定，然后被转换。
回答by Jayden Lawson
For anyone who finds their background images are disappearing in Chrome because of the same issue with background-attachment: fixed; - this was my solution:
对于那些发现自己的背景图片在 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');
});
}
回答by defligra
August 2016 and fixed position & animation / transform is still a problem. The only solution that worked for me – was to create an animation for the child element that takes longer time.
2016 年 8 月，固定位置和动画/变换仍然是一个问题。唯一对我有用的解决方案是为需要更长时间的子元素创建动画。
回答by yckart
Something (a bit hacky) that worked for me is to position:stickyinstead:
对我有用的东西（有点hacky）是position:sticky：
.fixed {
position: sticky;
}
回答by lowselfesteemsucks
Actually I found another way to fix this "bug":
其实我找到了另一种方法来解决这个“错误”：
I have container element which hold page with css3 animations. When the page completed the animation, the css3 property has value: transform: translate(0,0);. So, I just removed this line, and everything worked as it should - position: fixed is displayed properly. When css class is applied to translate the page, translate property is added and css3 animation worked as well.
我有包含 css3 动画页面的容器元素。当页面完成动画时，css3 属性的值是：transform: translate(0,0);。所以，我刚刚删除了这一行，一切正常 - position: fixed 显示正确。当应用 css 类来翻译页面时，会添加 translate 属性并且 css3 动画也能正常工作。
Example:
例子：
.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);
}
回答by Kerry Johnson
Probably due to a bug in Chrome as I can't replicate in Safari nor Firefox, but this works in Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output
可能是由于 Chrome 中的错误，因为我无法在 Safari 或 Firefox 中复制，但这适用于 Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output
It's a very particular structure so it's by no means a universally applicable one-lined css fix, but perhaps someone can tinker with it to get it working in Safari and Firefox.
这是一个非常特殊的结构，所以它绝不是一个普遍适用的单行 css 修复，但也许有人可以修改它以使其在 Safari 和 Firefox 中工作。
回答by Ron
Adding the -webkit-transformto the fixed element solved the issue for me.
添加-webkit-transform到固定元素为我解决了这个问题。
.fixed_element {
-webkit-transform: translateZ(0);
position: fixed;
....
}
回答by abksharma
on my phonegap project the webkit transform -webkit-transform: translateZ(0); worked like a charm. It was already working in chrome and safari just not the mobile browser. also there can be one more issue is WRAPPER DIVs are not completed in some cases. we apply clear class in case of floating DIVs.
在我的 phonegap 项目中，webkit transform -webkit-transform: translateZ(0); 像魅力一样工作。它已经在 chrome 和 safari 中工作，而不是移动浏览器。还有一个问题是在某些情况下 WRAPPER DIV 未完成。我们在浮动 DIV 的情况下应用 clear class。
<div class="Clear"></div> .Clear, .Clearfix{clear:both;}
回答by mrmadhat
I had this issue whilst trying to implement react-color with react-swipeable-views (rsw). The problem for me was that rsw applies translate(-100%, 0)to a tab panel which breaks the default fixed position div added over the full screen which when clicked closes the color picker model.
我在尝试使用 react-swipeable-views (rsw) 实现 react-color 时遇到了这个问题。对我来说，问题是 rsw 应用于translate(-100%, 0)选项卡面板，该面板会破坏在全屏上添加的默认固定位置 div，单击时会关闭颜色选择器模型。
For me the solution was to apply the opposite transform to the fixed element (in this case translate(100%, 0)which fixed my issue. I'm not sure if this is useful in other cases but thought I would share anyway.
对我来说，解决方案是对固定元素应用相反的变换（在这种情况下translate(100%, 0)解决了我的问题。我不确定这在其他情况下是否有用，但我想无论如何我都会分享。
Here is an example showing what I've described above:
这是一个示例，显示了我上面描述的内容：
