CSS未在iOS设备上应用

Question

我在iOS设备上遇到奇怪的渲染问题

这是网站- http://dev.makeyourownbottle.com

相关CSS：

.bottle-images {

    display: inline-flex;

}

.bottle-images img {
    width: auto;
}

.bottle img {

    width: 100%;
    padding: 0;
    position: relative;

}

.bottle p {

    position: absolute;
    font-family: 'Caveat', cursive;
    font-size: 30px;
    top: 19%;
    color: #006699;
    font-weight: 700;
    padding-left: 2px;
    margin-top: 2.4em;
}

.bottle {

    margin: 0 2px;

}

相关HTML：

<div class="bottle-images"><span class="bottle"><img src="/images/first-b.png"><p>1</p></span><span class="bottle"><img src="/images/second-b.png"><p>5</p></span><span class="bottle"><img src="/images/third-b.png"><p>7</p></span></div>

我遇到了一个问题，即瓶子图像前面呈现的数字不能始终如一地显示在瓶子顶部

我已经通过浏览器堆栈测试了各种手机型号，这绝对是iOS问题，不是在android上发生，不是在Windows或MacOS上发生

请注意，该网站已于2018年7月中旬在苹果商店使用不同的设备进行了测试-我们根本没有这个问题-现在突然得到了支持

1. 在iPhone X上-CSS加载后有时会自行修复 （大约1-2秒后），有时不是。 -如图中所示，我只是加载了该网站，并正确渲染了该网站，而其他时候却没有。
2. 如iPhone 8的图片所示，数字在初始加载时不正确，在iOS Chrome上，在屏幕上上下移动可立即对其进行纠正，而在Safari上则不可以-这与iOS 7,8一致，8 Plus我已经测试过-iPhone X有时在初始加载时可以正确显示。
3. 在浏览器堆栈上打开开发工具会立即对其进行修复-因此我不知道要检查什么（一旦工具窗口打开，它就可以正确对齐）
4. 有时在浏览器上单击刷新会对其进行修复，以进行后续的重新加载，而有时它会在每次重新加载时不断弄乱数字

我已经移动了CSS，将类移到了CSS的顶部，以查看是否有影响，但没有任何改变

我无法确定原因，因为一旦我打开开发人员工具，它就可以自行修复-好像是iOS中的一些内部渲染错误？

我无法确定原因/原因-任何人有任何建议吗？

Answer 1

我认为这可能是由于inline-flex选项引起的。

尝试一下：

.bottle-images {
    /* display: -ms-inline-flexbox; */
    /* display: inline-flex; */
    width: 84px;
    margin: auto;
}

.bottle-images:after {
    content: ' ';
    display: block;
    clear: both;
}

.bottle {
    margin: 0 2px;
    float: left;
}

只需像这样更新您的CSS，然后告诉我是否可行。希望这会有所帮助。