Safari always rerendering causing high cpu usage

Issue #15237 resolved
Brendon Sled
created an issue

Screen Shot 2017-11-17 at 9.52.08 AM.png

Comments (16)

  1. Misi Reman

    This happened to me as well starting a couple of days ago on Safari 11.0.2, MacOS 10.13.2.

    CPU usage went up to 99%. Killing the process through the activity monitor doesn't help as the process automatically restarts. Not using Bitbucket + Safari until this is fixed.

  2. Whymarrh Whitby

    I see this as well. I'm using Safari 11.0.2 on macOS 10.12.6. I see this all day, every day.

    Submitting this comment*:

    99 percent CPU use

    Just browsing repositories and PRs and whatnot:

    99 percent CPU use

    This is brutal, folks. My laptop is figuratively on fire—I cannot use my laptop on my lap with this page open because my fan cannot keep up with the heat generated (it's a Mid 2015 15-inch MacBook Pro, it's not like I'm using a MacBook Adorable). My computer also sounds like it's a Boeing 737 about to takeoff. It's bad.

    I dug into it a bit and I think this is a case of an old jQuery version. The jQuery version used (on bitbucket.org at least) is missing important changes such as e61fccb, which fixes jQuery#3103 and jQuery#1746. I see whole-page repaints on almost all mouseover and mouseout events:

    Holy repaints Batman

    And I can see obvious recalcs in the Timeline too:

    Web Inspector

    And tracing this back to jQuery wasn't too difficult either. The Safari web inspector will jump you right to the source:

    Web Inspector

    created an issue 2017-11-17

    In the nicest words possible, this is much too long for a bug like this to exist. Please fix this. I would like my CPU back.

    * I have another tab open with the Bitbucket Cloud support resources which won for topmost CPU usage.

  3. Sean McCullough staff

    Hello!

    The Bitbucket Front End team is continuing to look into the issue. Once we have a fix in place we will release the changes and follow up on this issue.

    Thanks,

    --Sean

  4. Jonathan Poh staff

    Hello all,

    Thanks for reporting this issue. As a fellow Safari user I certainly feel your pain. We started noticing and getting reports about the high CPU usage after Safari 11.0.2 was released publicly on 6 December 2017. We believe it is a combination of a bug in Webkit/Safari and something in our Atlaskit shared UI library that manifests itself in the high CPU load.

    Webkit has acknowledged and fixed the bug, and this appears to have landed in the current Safari Technology Preview (Release 45). Downloading and using that pre-release version of Safari would be one way to prevent your computer from melting down and saving your laps from getting burnt.

    In the meantime, the Atlaskit team has also made some changes to the components we use in Bitbucket, and we are working on upgrading these affected components right now, and will be deploying the changes soon. This should mitigate some of the Safari CPU load issues until Apple releases the next version of Safari.

    I looked into jQuery, and while it is true we are on an older version of jQuery, it is not the cause of the layout thrashing you're seeing in the Web Inspector.

    Jonathan

    Bitbucket Cloud Developer

  5. Whymarrh Whitby

    Hi Jonathan, thanks for sharing an update with us.

    We believe it is a combination of a bug in Webkit/Safari and something in our Atlaskit shared UI library that manifests itself in the high CPU load.

    Webkit has acknowledged and fixed the bug

    In the meantime, the Atlaskit team has also made some changes to the components we use in Bitbucket, and we are working on upgrading these affected components right now, and will be deploying the changes soon. This should mitigate some of the Safari CPU load issues until Apple releases the next version of Safari.

    I can confirm that this does seem to mostly be a WebKit bug in that I can remove instances of calc to lower the CPU usage. On the Bitbucket home page, for example, I can disable the height on .bZuPrG ([1], [2]) and .idKGDF which use calc() for their values. Thanks for linking to that issue and I'll happily await an updated Safari.

    I looked into jQuery, and while it is true we are on an older version of jQuery, it is not the cause of the layout thrashing you're seeing in the Web Inspector.

    I think you maybe meant "it is not the cause of the CPU usage", which, as you revealed, it isn't the main cause of. I do think the layout thrashing is caused by an older (buggy) version of jQuery because that's how the Web Inspector works. Removing calcs from the page still sees Bitbucket sitting at around 5% CPU usage (sometimes up to 11% in my quick tests) which isn't good (though, admittedly, I may not have noticed until this WebKit bug caused it to spike up). Furthermore behaviour similar to the that in the animation I linked above (intentionally causing a lot of mouse events and thus layout thrashing) causes the site's CPU usage to jump up to anywhere around 20% to 30% which is also not good.

  6. Ben Gummer staff

    Hi everyone, just an update to let you know that this issue has been fixed so Bitbucket should no longer fry your CPU on Safari.

    This fix has been tested in Safari 11.0.2, so no need to update or switch browsers.

    Please feel free to comment on this issue if the problem reappears.

    Thanks,
    Ben

  7. Whymarrh Whitby

    I can confirm that idle CPU usage has been significantly reduced and I can now use Bitbucket on Safari without issue. Thank you for fixing this and I apologize for being difficult in this thread. I do appreciate the team's work on this issue. ✌🏽

  8. Log in to comment