I am using Safari 12.1.1 on macOS, with no extensions.

https://worldbuilding.stackexchange.com and https://anime.stackexchange.com seem to have a bit sluggish, inertial and non-smooth scrolling on their home pages as compared to the sites with no background image in the sidebar, such as https://apple.stackexchange.com.

Is that true or is my system at fault?

enter image description here

This screenshot was seen temporarily, but I do notice the sluggishness most probably due to the illustrations in the background.


The left part on the timeline is for Worldbuilding and right one for apple.

The blue marks are where I changed the web page.

Scrolled up and down a few times on per site.

enter image description here

enter image description here

This call tree screenshot is for Worldbuilding. I cannot find icon etc for export, thus the image.

enter image description here

For Apple

enter image description here

  • No repro in Chrome / Win 10.
    – rene
    Sep 23 '19 at 6:47
  • We had this bug earlier but I don't think this is related.
    – rene
    Sep 23 '19 at 6:48
  • Yeah I commented on that one too. All good on Firefox.
    – anki
    Sep 23 '19 at 6:49
  • Would like hints towards creating reports on Safari. Currently trying to Find a JS profiler.
    – anki
    Sep 23 '19 at 6:55
  • For Safari? Don't they no longer have the developer tools that come with Webkit?
    – rene
    Sep 23 '19 at 6:57
  • Never used them. See the answer please. Might also want to move it into the question. Posted it below to keep discussion organised.
    – anki
    Sep 23 '19 at 7:02
  • 1
    yeah, you better edit that in the question. Any change of having a call stack for those javascript events?
    – rene
    Sep 23 '19 at 7:05
  • Call tree or Events? Also, If some safari user could tell me how to export those logs, I won't have to dig into developer.apple.com/library/archive/documentation/…
    – anki
    Sep 23 '19 at 7:13
  • I think call tree is most valuable as that should reveal if the start point is a SE script and which one it is.
    – rene
    Sep 23 '19 at 7:15
  • Saw the answer below? I think that could fix it, if a developer looks here.. you think that's possible ?
    – anki
    Jan 20 '20 at 17:47

I just diagnosed it and it's purely an issue with rendering background images in Safari and has nothing to do with Javascript. The slowdown occurs when using multiple images in background-image with different background-attachment attributes.

I made a bare-bones html file that shows the same slowdown in Safari but not Firefox and Chrome (and included the images in the same directory):

    <style type=text/css>
      body {
        min-height: 200%;
        background-image: url("site-background-figures.png"), url("site-background-texture.png"), url("site-background-land.svg");
        background-position: top 90% left, top left, top left;
        background-repeat: no-repeat, repeat, no-repeat;
        background-size: 187px, 400px, 100%;
        background-attachment: fixed, scroll, scroll;


Changing the background-attachment section to:

background-attachment: scroll, scroll, scroll;


background-attachment: fixed, fixed, fixed;

Fixes the slowdown in Safari because the images no longer need to be redrawn against each other constantly (I assume).

Quick Fix: Add a bookmark that points to: javascript:$('body').css('background-attachment','scroll,scroll,scroll') and click it to fix lag on the current site.

  • 4
    It would be nice if the worldbuilding css were changed to accommodate the bug, but it’s ultimately a problem with Safari and should be fixed there. I’ve submitted a Radar to Apple but who knows if we’ll see a fix any time soon :(
    – Leo Adberg
    Jan 20 '20 at 17:38

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .