5

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.

Debugging:

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. – ankii Sep 23 '19 at 6:49
  • Would like hints towards creating reports on Safari. Currently trying to Find a JS profiler. – ankii 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. – ankii 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/… – ankii 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 ? – ankii Jan 20 at 17:47
6

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):

<html>
  <head>
    <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;
      }
    </style>
  </head>

  <body>
  </body>
</html>

Changing the background-attachment section to:

background-attachment: scroll, scroll, scroll;

or:

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.

  • That is clearly some improvement, but should I wait for a developer to look into this ? – ankii Jan 20 at 17:34
  • 3
    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 at 17:38

You must log in to answer this question.

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