MENU

遇到了一个奇怪的 Safari 的 Bug

• December 20, 2017 • Read: 20257 • 日常

昨天 nacal0C 大佬说我博客打开后 Safari CPU占用有120%多。。。自己手贱试了下,发现居然特么是真的😂。。。

一开始怀疑前段时间重构的时候 一不小心 JavaScript 哪里出什么问题了,然后打开 Chrome准备调试,结果发现 P 事没有。。。

这特么就很尴尬了😓

没办法,果断滚回 Safari,点开时间线 - 录制,发现「布局与渲染」那一块密密麻麻的样式已失效,心想估计就是这块的原因,导致一直重新布局计算的吧,事实证明也确实如此。

TimeLine密密麻麻的样式已失效

不过,天真的我此刻还在想着肯定是之前的 JavaScript 出了问题,第一时间进行了注释大法排除,结果到最后也是没一点 P 用,一生气,把主题 css 文件也给注释掉了,然后发现居然特么的好了,真特么无 F**k 说。

到了这里基本可以确定是 Safari 的 Bug 了,但是问题总要解决嘛,况且我也想知道问题到底出在了哪里,所以还是继续进行了注释大法排查。。

Bug 的话不知道是什么时候有的,但我这个macOS 10.13.2是有的,C0大佬不知道啥版本,然后,最终能确定其中的三个条件吧:

  • 一个 Media Query
  • 一个计算的宽度值(高度应该也是可以的)
  • 一个应用于宽度上的过渡效果

其中第一个条件比较玄学,试了[min|max]-width: 75rem 及以上的值都是可以的,但74rem就不行了,估计和浏览器宽度也有一定关系。

后面两个条件大体是确定了的,过度效果如常见的transition: 0.5s ease all; 同样包含宽度属性所以妥妥的也能触发。但其应用对象同样很玄学:我自己的博客是很多元素一改就触发,但在写样例代码的时候,如果把属性应用在了一个 div 上,则必须开着 F12 ,同时鼠标选中那个 div 或其子元素,然后再点刷新才能触发,所以后面我是直接应用在了 html 上,简单粗暴。

下面是测试用的样例代码,不长,就10几行,可以让你的 CPU 出现一核有难,7核围观的现象😃:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Test Bug</title>
        <style type="text/css">
            @media screen and (min-width: 200rem) {}
            html {
                width: calc(100% - 20px);
                transition: 0.5s ease width; 
            }
        </style>
    </head>
    <body></body>
</html>

有 Safari 的童鞋可以自己试试,当然,这里也有成品可供测试(右键新标签页打开)

话说,自从升到10.13,不说其他的,Safari 的Bug就遇到了很多,诸如启用独显后动画卡成狗,开发模式清空缓存生不生效看它老人家心情,还有各种渲染的色块异常的问题,简直糟心。

不过也是没办法,谁让它长得好看呢😂😂😂

Last Modified: January 31, 2023
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

16 Comments
  1. 2018新年快乐!!!

    1. @折影轻梦新年快乐@(哈哈)

  2. @(滑稽)Chrome Chrome Chrome !!!!!

    1. @c0smxsec拒绝使用电老虎@(喷)

  3. 水多\#(脸红)

    1. @ShumRain冬天比较干燥,要多补水@(阴险)

  4. 也许这就是大佬吧

  5. 一核有难,7 核围观@(滑稽)