Ex_doc: Slow scrolling on Safari for macOS 10.13 due to additional style rule

[evadne]

The page https://hexdocs.pm/mix/Mix.Tasks.Profile.Fprof.html scrolls very slowly (20fps – 30fps) on rMBP 2016 when integrated graphics is used on Safari 11.1 (13605.1.33.1.4) for macOS 10.13 due to this rule:

.content-inner .specs pre, .content-inner code {
  font-family: Inconsolata,Menlo,Courier,monospace;
}

When scrolling up/down the frame rate drops to 30fps. Unfortunately when recording screen content with QuickTime Player the frame rate is capped at 30fps anyway. But disabling this particular rule in Inspector restores performance (55fps – 60fps).

[evadne]

NB: this may not be worth fixing at the moment because the issue does not manifest when attempting to scroll the document when another window is in foreground. It may be a Safari bug

[josevalim]

Thanks @evadne! I could not reproduce on Safari 11.1.1. Can you?

[josevalim]

Ping. :)

[net]

Same behavior for me on both 11.1.1 and 12.0. I agree it is likely a Safari bug; however, it may still be worth considering a interim patch.

[josevalim]

Thanks @net! Since I cannot reproduce it locally, could you take a look at it and see if you can come up with a fix?

[michalmuskala]

I can reproduce this, but disabling the style rule that @evadne pointed out does not fix it for me.

[smfr]

Slow scrolling triggered by certain fonts was fixed in macOS Mojave.

[josevalim]

Glad to hear!

[josevalim]

Thanks for the updates!

[evadne]

Hi, on 10.13 this still happens somehow if the window is larger, I can get it to lag on a Vega 64 when the window is 1920 by 2160 pixels. I have done some poking around today, and found that this is likely because the sidebar and content elements are overlapping. The content element sits under the sidebar and has width: 100%; padding-left: 300px. I have tried to change this to width: calc(100% - 300px) and it seems much better now.

It is worth noting, that I reproduced the problem on Ecto.Query documentation which has relatively complicated content.

[kzvi]

Just for the record I still have this issue on Mojave.

[archdragon]

I have a theory about where the problem might be. I've tried to reproduce and fix it locally.

@evadne @kzvi If you have a moment can you take a look at:
1) My demo
2) Hexdocs

and check if you see any difference between 1) and 2) ?

Thanks! :)

[smfr]

https://hexdocs.pm/elixir/Kernel.html is slow because it's using overflow:scroll. Your demo is faster because it's using page scrolling, which is more highly optimized in Safari.