如题，祖先元素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 */
<div class="red">1
<div class="green">2
<div class="yellow">3
<div class="black">4
<div class="aquamarine">5
<div class="blue">6</div>
</div>
</div>
</div>
</div>
</div>
/* css */
.red{
150px;
height: 150px;
background: red;
text-align: center;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.green{
position: absolute;
120px;
height: 120px;
left: 0px;
top: 0px;
background: green;
}
.yellow{
position: fixed;
80px;
height: 80px;
left: 0px;
bottom: 0px;
background: yellow;
}
.black{
position: fixed;
50px;
height: 50px;
right: 0px;
top: 0px;
background: black;
}
.aquamarine{
position: fixed;
30px;
height: 30px;
right: 0px;
bottom: 0px;
background: aquamarine;
}
.blue{
position: fixed;
10px;
height: 10px;
right: 0px;
bottom: 0px;
background: blue;
}
左边图为正常情况下的表现，transform所有后代元素的fixed参考视图都是transform的祖先元素，而右边的是iphone6上的表现，从第三代开始，参考视图变更为以父级元素左上角位置为起点，祖先元素长宽为长宽的虚拟视图为参考视图。因此情况变得不可控。
- 解决方案
- 既然事情因
transform引起，就在fixed定位嵌套三层以上时慎用transform，这个为最基本的解决方案。 - 好吧，我没找到其他办法