transform导致fixed失效

2017-09-08

在做移动端菜单的时候发现设置will-change:transform会导致position为fixed的子元素相对于父级元素来定位,一个简答的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    	.container {
    		width: 100%;
    		height: 100px;
    		background: #333;
    		will-change: transform;
    	}
    	.child {
    		position: fixed;
    		width: 100%;
    		height: 100%;
    		background-color: rgba(0,0,0,0.3);
    	}
    </style>
</head>

<body>
	<div class="container">
		<div class="child"></div>
	</div>
</body>
</html>

运行结果中child元素不是相对于浏览器窗口来定位

fixed的定义是生成绝对定位的元素,相对于浏览器窗口进行定位

will-change属性为web开发者提供了一种告知浏览器该元素会有哪些变化的方法,这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好,使页面的反应更为快速灵敏,虽然好用,但是不要滥用

w3.org有一句话“If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.”

大致的意思是使用will-change会导致元素产生新的层叠容器,为了更好渲染不导致整个页面重绘

但是特殊的是,使用will-change:opacity却不会导致position:fixed失效,所以导致这个原因应该不是will-change属性,应该是transform。如果在父元素使用transform属性,也会导致子元素的position:fixed失效

最简单的解决方法是,如果使用到transform动画时候,尽量不要在transform的元素上的子元素使用fixed布局或者absolute布局

标签: css3 html5

如果本文对您有所帮助,可以扫下面二维码给我支持,您的鼓励是我前进的动力!

微信

支付宝

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论
相关推荐
dvajs的概念
数据流向 数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过...
responseType相关知识点
前端跟后端通过ajax请求来传输数据,服务端通常会返回json数据来处理,我们可以通过设置 XMLHttpRequest...
微信小程序下拉刷新
背景 微信小程序的wxml用来写界面,但是小程序底层实现却没有引入dom的思想,所以我们无法用js来操作界面的元素,也...