祖先元素transform非none时在Iphone6上引起后代fixed/absolute元素的怪异表现及解决方案...

如题，祖先元素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时，按照规范，后代元素的表现应为：

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

2. 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{
    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上的表现，从第三代开始，参考视图变更为以父级元素左上角位置为起点，祖先元素长宽为长宽的虚拟视图为参考视图。因此情况变得不可控。

• 解决方案

1. 既然事情因transform引起，就在fixed定位嵌套三层以上时慎用transform，这个为最基本的解决方案。
2. 好吧，我没找到其他办法