position: fixed失效的奇怪现象
最近一直在开发FreeNG UI框架。在开发富文本编辑器时,发现了一个奇怪的现象,那就是设置全屏(
position: fixed
)时,发现效果却如position: absolute
;而不是基于可视区定位。代码如下:
.fullscreen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 10100;
}
经过一番google,发现了问题所在,原来是父元素(祖先元素)中的transform
属性导致的(貌似这个bug一直存在)。
Google的原因:http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
https://bugs.chromium.org/p/chromium/issues/detail?id=20574
两篇文章里提到的方法都尝试过,最终都是无效的。
目前暂无可行方案,在这里先留个坑。
如有解决方法的,欢迎告知!