美文网首页
position:fixed在chrome下失效的bug

position:fixed在chrome下失效的bug

作者: 葱花儿大大 | 来源:发表于2016-11-22 19:55 被阅读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的节点下,或者使用其他布局模拟;

    对于这种情况,我等开发人员能说什么呢?

    相关文章

      网友评论

          本文标题:position:fixed在chrome下失效的bug

          本文链接:https://www.haomeiwen.com/subject/gskmpttx.html