上个月苹果更新的系统版本,包括 iOS 10 和 MacOS,伴随更新的还有新的 safari。 新版本上来必然会多多少少存在一些坑。还好上个月有段时间在休假,并没有踩到坑。

但是,就在昨天,终于被我踩到了。。。。

大概是这样的:

公司的项目会使用 rem 来做不同屏幕的适配,然后昨天做完一个页面以后,发现在 chrome 下调试没有任何问题,自己的安卓手机也没有问题,但是到了 iphone 上就会出现:上半部分样式正常,下半部分 rem 布局的样式全部都缩小了!

从来没有遇到过同一个页面里面,一部分样式没问题,另一部分样式有问题的情况。。

切换各种浏览器测试发现,只有 safari 10 下会出现这个问题,包括 iOS 下、MacOS 下 和使用 safari 10 的微信浏览器,都会出现这样的问题。。。

好吧,经过了一晚上蛋疼的排查问题,终于找到了原因:

原来是因为一个 summary 标签!!!!

最终发现在 summary 标签前面的样式都没有问题,后面的元素全部缩小了,而把 summary 标签一去掉,样式就全部正常了!

然后自己也写了个小例子,大概是这样的:

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" />
        <style>
            html{
                font-size: 20px;
            }
            .test-box{
                margin: 20px auto;
                height: 4rem;
                width: 4rem;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="test-box"></div>
    </body>
</html>

这样是完全没有问题的,test-box 显示正常的大小

但是,如果我在它前面加一行 summary,比如这样:

...
<body>
    <summary>123</summary>
    <div class="test-box"></div>
</body>
...

在 safari 10 下面,你就会惊奇的发现,它的 rem 计算出错了!!!

到网上搜了很久,并没有找到相关的资料,估计是 safari 的 bug 吧。 昨天也给 safari 提了 bug report,但是并没有得到回应(不晓得那个提交系统是不是真的好用...)

好吧,目前暂时的解决方法就是把 summary 替换成别的标签,暂时避免使用它喽,等苹果修复好再说。。。

嗯嗯,今天就这样吧,主要是好久没更新,写篇文章表示,我还活着!

晚安~

标签: safari, rem, ios, macos

添加新评论