当前位置: 首页 > Web前端 > CSS

当祖先元素transform为non-none时,导致后代fixed-absolute元素在Iphone6上的奇怪表现及解决方法

时间:2023-03-31 12:50:56 CSS

如题,当祖先元素transform为non-none时,记录奇怪Iphone6中后代元素固定引用视图的表现及解决方法。级联关系和参考视图级联上下文是HTML元素的三维概念,它沿着相对于用户(计算机屏幕)窗口或网页的假想z轴延伸。HTML元素根据自身的属性进行优先排序,在堆叠上下文中占用空间。文档中的堆叠上下文由满足以下任何条件的元素形成:根元素(HTML)、具有非“auto”的z-index的绝对/相对定位、具有otherz-index的flex项目比“auto”(flexitem),即:父元素显示:flex|inline-flex,opacity属性值小于1的元素,transform属性值不为“none”的元素,mix-blend-mode属性的元素value不为“normal”,filter值不为“none”的元素,perspective值不为“none”的元素,isolation属性设置为“isolate”的元素,position:fixed指定will-change任意CSS属性,即使你不直接指定这些属性的值(参考这篇文章)-webkit-overflow-scrolling属性设置为“touch”元素。关于层叠上下文的层级和创建,可以参考张新旭深入理解CSS中的层叠上下文和层叠顺序。详细;在今天讨论的问题中,已知position:fixed和transformnon-none会创建一个新的堆叠上下文。至于层级,在同一个stackingcontext下,要看后来居上和大者两个规则。至于引用视图,两句话是绝对的:没有为元素保留空间,通过指定元素相对于最近的非静态定位祖先元素的偏移量来确定元素的位置。fixed:不为元素保留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。滚动屏幕时元素的位置不会改变。打印时,该元素会出现在每一页的固定位置。fixed属性创建一个新的堆叠上下文。当元素的祖先具有非无转换属性时,容器从视口更改为该祖先。如果祖先元素的transform属性不为none,则不考虑固定子元素的影响。当祖先元素的transform属性不为none时,按照规范,后代元素的表现应该是:absolute元素仍然保持最近的非position:static;元素是引用,祖先元素也会被视为非position:static;固定元素的默认参考视图是屏幕视口。这里,当祖先元素transform设置为non-none时,后代元素的引用视图应该是祖先元素;在Iphone6(IOS版本没查),不管祖先元素的定位属性,当后代元素的定位属性为absolute/fixed时,当后代及后续子元素的定位属性固定时,定位视图不是祖先元素祖先元素的子元素:定位视图是祖先元素;普通祖先元素的子元素的子元素:定位的视图是祖先元素;普通祖先元素的子元素的子元素的子元素:以父元素的左上角坐标为起点,以祖先元素的长宽为长宽,一个绘制虚拟视图,定位视图就是这个虚拟视图;异常祖先元素的子元素的子元素后续的每一代都是从第三代开始的表现,起点是当前元素的父元素的左上角坐标,其虚拟视图length和width是祖先元素的长宽是定位view;异常情况见代码和图片:/*html*/123456

/*css*/.red{宽度:150px;高度:150px;背景:红色;文本对齐:居中;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}.green{position:absolute;宽度:120px;高度:120px;左:0px;顶部:0px;背景:绿色;}.yellow{位置:固定;宽度:80px;高度:80px;左:0px;底部:0px;背景:黄色;}.黑色{位置:固定;宽度:50px;高度:50px;0像素;背景:黑色;}.aquamarine{位置:固定;宽度:30px;高度:30px;右:0px;底部:0px;右:0px;底部:0px;background:blue;}左图是正常表现,transform所有后代元素的固定参考view是transform的祖先元素,右图是iphone6上的表现,从第三代开始一开始,引用view改成从父元素的左上角开始,以祖先元素长宽的虚拟view为referenceview,这样情况就变得不可控了。解决方案由于东西是transform引起的,当fixedpositioning嵌套超过三层时慎用transform。这是最基本的解决方案。嗯,我找不到别的办法