资讯专栏INFORMATION COLUMN

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

lei___ / 2965人阅读

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

如题,祖先元素transformnone时,记录一下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:fixedtransformnone都会创建新的层叠上下文,至于层级,在同一层叠上下文中,取决于后来居上及孰大孰上两个规则。
至于参考视图,两句话

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,这个为最基本的解决方案。

好吧,我没找到其他办法

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

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

相关文章

  • 祖先元素transformnone时在Iphone6引起后代fixed/absolute元素的怪

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

    MarvinZhang 评论0 收藏0
  • 我所了解的CSS包含块

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

    BenCHou 评论0 收藏0
  • CSS 面试题总结

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

    tomato 评论0 收藏0
  • 前端面试笔记 - css

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

    loonggg 评论0 收藏0
  • css基础

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

    JinB 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<