祖先元素transform非none时在Iphone6上引起后代fixed/absolute元素的怪

MarvinZhang 发布于2019-08-01 17:18 / 2933人阅读

摘要：如题，祖先元素非时，记录一下中引起后代元素参考视图怪异表现和解决方案。不为元素预留空间，而是通过指定元素相对于屏幕视口的位置来指定元素位置。打印时，元素会出现在的每页的固定位置。

如题，祖先元素transform非none时，记录一下Iphone6中引起后代元素fixed参考视图怪异表现和解决方案。

层叠关系及参考视图

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
文档中的层叠上下文由满足以下任意一个条件的元素形成：

根元素 (HTML),

z-index 值不为 "auto"的绝对/相对定位，

一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，

opacity 属性值小于 1 的元素，

transform 属性值不为 "none"的元素，

mix-blend-mode 属性值不为 "normal"的元素，

filter值不为“none”的元素，

perspective值不为“none”的元素，

isolation 属性被设置为 "isolate"的元素，

position: fixed

在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考这篇文章）

-webkit-overflow-scrolling 属性被设置 "touch"的元素

关于层叠上下文的层级及创建，可以参考下张鑫旭大神的深入理解CSS中的层叠上下文和层叠顺序，相当详细；在今天讨论的问题中，知道position:fixed和transform非none都会创建新的层叠上下文，至于层级，在同一层叠上下文中，取决于后来居上及孰大孰上两个规则。
至于参考视图，两句话

absolute：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。
fixed： 不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform  属性非 none 时，容器由视口改为该祖先。

祖先元素transform属性不为none对子元素fixed的影响
不考虑其他因素的前提下，祖先元素的transform属性不为none时，按照规范，后代元素的表现应为：

absolute元素依然保持以最近的非position: static;的元素为参考,其中祖先元素也会被视为非position: static;

fixed元素默认的参考视图是屏幕视口，在这里，祖先元素transform被设置为非none时，后代元素的参考视图应该是祖先元素；
Iphone6（未排查IOS版本）当中，不管祖先元素定位属性，子代元素定位属性为absolute/fixed时，子代的子代及再往后的子代，定位属性为fixed时，定位视图并不是祖先元素

祖先元素的子元素：定位视图是祖先元素；正常

祖先元素的子元素的子元素：定位视图是祖先元素；正常

祖先元素的子元素的子元素的子元素：以父级元素的左上角坐标为起点，祖先元素的长宽为长宽，画一个虚拟的视图，定位视图就是这个虚拟的视图；异常

祖先元素的子元素的子元素的子元素的往后每一代，都沿袭第三代开始的表现，依当前元素的父元素左上角坐标为起点，祖先元素长宽为长宽的虚拟视图为定位视图；异常
看代码及图：

/* html */
1
    2
        3
            4
                5
                    6
                
            
        
    

/* css */
.red{
    width: 150px;
    height: 150px;
    background: red;
    text-align: center;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.green{
    position: absolute;
    width: 120px;
    height: 120px;
    left: 0px;
    top: 0px;
    background: green;
}
.yellow{
    position: fixed;
    width: 80px;
    height: 80px;
    left: 0px;
    bottom: 0px;
    background: yellow;
}
.black{
    position: fixed;
    width: 50px;
    height: 50px;
    right: 0px;
    top: 0px;
    background: black;
}
.aquamarine{
    position: fixed;
    width: 30px;
    height: 30px;
    right: 0px;
    bottom: 0px;
    background: aquamarine;
}
.blue{
    position: fixed;
    width: 10px;
    height: 10px;
    right: 0px;
    bottom: 0px;
    background: blue;
}

左边图为正常情况下的表现，transform所有后代元素的fixed参考视图都是transform的祖先元素，而右边的是iphone6上的表现，从第三代开始，参考视图变更为以父级元素左上角位置为起点，祖先元素长宽为长宽的虚拟视图为参考视图。因此情况变得不可控。

解决方案

既然事情因transform引起，就在fixed定位嵌套三层以上时慎用transform，这个为最基本的解决方案。

好吧，我没找到其他办法

GPU云服务器云服务器共有祖先元素 html后代元素 js获取上一个元素上引起

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51087.html

祖先元素transform非none时在Iphone6上引起后代fixed/absolute元素的怪

摘要：如题，祖先元素非时，记录一下中引起后代元素参考视图怪异表现和解决方案。不为元素预留空间，而是通过指定元素相对于屏幕视口的位置来指定元素位置。打印时，元素会出现在的每页的固定位置。如题，祖先元素transform非none时，记录一下Iphone6中引起后代元素fixed参考视图怪异表现和解决方案。层叠关系及参考视图层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相...

lei___ 2019-08-29 13:05 评论0 收藏0
我所了解的CSS包含块

摘要：根元素包含块根元素的包含块是一个矩形叫做初始化包含块。如果属性是的话，包含块就是由组成的。示例二代码在这里，这个标签为默认的且它的父标签的为，所以标签的包含块为标签，通过我们的判断规则一来确定。写在前面，本文将同步发布于Blog、掘金、segmentfault、知乎等处，如果本文对你有帮助，记得为我得到我的个人技术博客项目给个star哦。指出错误观念许多开发者认为一个元素的包含块...

BenCHou 2019-08-30 15:54 评论0 收藏0
CSS 面试题总结

摘要：而名作为标签的身份则是唯一的，在页面中只能出现一次。会导致父容器高度塌陷。堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。之后的内联对象会被排列在同一行内。的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动。 CSS 中类 (classes) 和 ID 的区别。书写上的差别：class名用.号开头来定义，id名用#号开头来定义；优先级不同（权重不同）调用上的...

tomato 2019-08-29 15:06 评论0 收藏0
前端面试笔记 - css

摘要：是页面渲染的一部分。一个就是一个整体，所有子元素都会在里面渲染，而不会影响外面的元素。常见为，根元素，，元素，或者设置了的元素列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。是一个把众多小图片打包成一个大图以减少请求。 CSS 中类 (classes) 和 ID 的区别。 id唯一，class可以多个请问 resetting 和 normalizing CSS 之间的区别？你...

loonggg 2019-08-23 14:50 评论0 收藏0
css基础

摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。 CSS display: none; 与 visibility: hidden; 的区别联系：它们都能让元素不可见区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；vi...

JinB 2019-08-30 14:21 评论0 收藏0