position:fixed在chrome下失效的bug
2016-11-22 本文已影响606人
葱花儿大大
父节点使用css的transform: translate(0, 0)时,子节点的position:fixed在chrome浏览器中无效
今天在的我的个人博客引入《畅言》评论插件的时候发现了一个bug,畅言有个打赏功能,点击会在屏幕中间出打赏页面,见地址;但是在我的博客中并没有在当前屏幕中间显示,而是在高达4000px的页面的中央(这个是偶当然是看不到的);f12查看css代码发现使用的是position:fixed;非常奇怪是这样的效果;经过一番查阅,发现是css3的transform:translate导致的;在chrome浏览器下,如果父元素使用了transfrom:translate()效果,则子节点的position:fixed效果就会失效;表现得和absolute一样;同样的写法在ie下没有问题;其他浏览器没有测试;目前没有好的解决方案,只有将节点不放在有transform的节点下,或者使用其他布局模拟;
对于这种情况,我等开发人员能说什么呢?