iphone5真机，绝对定位的兼容问题

该问题出现的原因已经找到：根本原因就是absolute定位的元素不参与flex的布局，详见 当flex容器中包含absolute元素时。

最近在做一个h5页面。其中有个常见商品列表，商品图片布局采用的是 flex + positon:absolute 来布局。
在调试器上各型号、真机iphone6及以上展示良好（图1），但在iphone5 的真机测试时会发生图片向右偏移50%的情况（图2）。

图1 - 正常时 图2 - iphone5真机的bug：图片偏移了

一、商品列表布局方式

此处为了做到图片高度100%，所以采用了 .img-box 设置 padding-top：100%， 结合 图片元素img 做 绝对定位 来实现图片的布局。

同时还通过flex布局方式，使得图片在 .img-box 水平居中。
为了让flex布局生效，在图片img上没有做水平方式的平移设置（即没有设置left 和 right数值，这时候它们的数值等价于auto）。

#html

                <ul id="productBox">
                    <li>
                        <a><div style="padding:5px;">
                                <div class="img-box">
                                    <img src="https://cdn2.jianshu.io/assets/default_avatar/7-0993d41a595d6ab6ef17b19496eb2f21.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120">  
                                </div>
                            </div>
                            <div class="desc">
                                <p class="now-price">US 28</p>
                                <span class="old-price">US 56</span>
                                <span class="off-percent">-50%</span>
                            </div>
                        </a>
                    </li>
                </ul>

# css
#product-box .img-box{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;

    position: relative;
    width: 100%;
    padding-top: 100%;
}
#product-box .img-box img{
    position: absolute;
    height: 100%;
    z-index: 2;
    top: 0;
}

二、图片偏移问题分析

图2的bug展示效果，相当于是对图片img做了向右偏移了50%。

.more-product .img-box img{
    left: 50%;
}

由此大胆猜测，在iphone5真机环境下，left: auto并没有真的auto了，而是等价于left:50%。
如果商品图片是统一的正方形图，那我们直接给图片img加上样式left: 0;就好了（这样flex居中效果会失效）。但项目中图片还有竖向的长方形图，必须水平居中。

采取了个紧急处理方案是，针对iphone5做了left: 0;，放弃水平居中效果。

/* iphone5 */
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
    .more-product .img-box img{
        position: absolute;
        height: 100%;
        z-index: 2;
        top: 0;
        left: 0;/* iphone5 默认的auto情况实际是偏移50%*/
    }
}

三、结语

上面只不过是个紧急处理方案，并不是完美解决方案。
目前没有准确定位到问题的所在：

• 是不是只有iphone5会这样？
• iphone4呢？
• 确实是left: auto的兼容表现形态不同引起的么？
• 具体的兼容分界线在哪里？
• ...
  以上都需要进一步探究。
  未完待续吧~~~~~~~~~~~

参考文章：
iphone5媒体查询信息：媒体查询iphone4,5,6以及更高

PSS：在网路上并没有找到多少相关的文章，仅此一篇和iphone5兼容性有点相关，但异常效果不是很类似：绝对定位引起的css样式系统兼容问题