background-attachment:fixed

[leeenx]

##背景

在构建“荣耀4A首发”时，发现，背景没办法做成平铺样式（因为是CP做的视觉，所以没办法 了），于是就想到了把背景做成固定的，避免背景平铺断层。

##实例观察

PC CHROME下看到的效果如下：

在ADNROID下看到的效果如下（MX note）：

三星等其实安卓手机上看也是同样的效果。

##现象分析

在安卓下的表现：背景把内容给覆盖了。
我想象的渲染过程：使用background-attachment_fixed;的背景在android下，会生成一个不存在于DOM中的背景渲染层，是这个渲染层会遮住其它层。

直观的解决思路应该是通过z-index来解决。

如果是z-index的话就会涉及到stacking context的概念。可以参见: http://segmentfault.com/q/1010000002480824

通过设置position为absolute/relative、opacity、transform等方法来创建 stacking context

##解决方案

我在上一步的的现象分析中，有一个想象的渲染过程，那里面描述的背景渲染层与使用background-attachment_fixed节点之间的关系是父子还是兄弟是解决问题的关键。

可能直观上想象应该是父子，但是事实上却是兄弟

所以呢，解决BUG的方案如下:

可以在background-attachment_fixed的节点的样式中加以下任意一个样式即可解决：

1. position:relative/absolute
2. z-index:不为auto
3. transform
4. opacity:99(不推荐这种)

以下是出现问题的页面：

使用解决方案后的页面：

http://jdc.jd.com/fd/promote/201507/honor4a/good.html

##在IOS下也有BUG

页面在后续测试时发现在手Q内置游览器下。background-attachment:fixed; 失效，进而在ios的safari下测试，这个样式也会失效。也就是说，ios不支持这个样式!!!
这个是在"caniuse.com"中查询的结果：

这里的记录显示:ios 8以上的safari全面支持background-attachment。不过，我的实测结果是ios8.4又不支持 background-attachment:fixed

##IOS的解决方案

理论上可以用fixed来虚拟。不过，效果很不理想

##结论

background-attachment避免使用这个样式