Poor scrolling performance of search results in Safari on macOS

[marcusseto]

Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

The search results for the search bar at the top of the page do not scroll smoothly.

If the current behavior is a bug, please provide the steps to reproduce. If possible, please upload a screenshot or link to a video recording (on macOS you can use QuickTime) demonstrating the problem.

Type PL or UTC in the search bar at the top of the page and scroll. (This problem is presently only known to exist in Safari on macOS. It is not reproducible in Safari on iPad, Chrome on Linux, and Chrome on Android.)

It seems to be a layout or rendering issue. See highlighted portion of timeline below.

What is the expected behavior?

Search results should scroll smoothly.

Further information

• Which version of NUSMods are you currently using? 20180109-43cdfe8
• Did this work in NUSMods BEFORE the R release/redesign? Yes
• Did this work in NUSMods AFTER the R release/redesign? No
• Which browser and version are you using? Safari 11.0.2
• Which device are you using? MacBook Pro
• Which operating system and version are you on? macOS 10.13.2

[taneliang]

ModulesSelect's dropdown is jittery as well, but the scrolling performance is nowhere as bad as the global search dropdown.

[ZhangYiJiang]

This article from Google Developers mentions that we can force the browser to introduce a new layer by abusing the transform property, which may help

For browsers that don’t support will-change, but benefit from layer creation, such as Safari and Mobile Safari, you need to (mis)use a 3D transform to force a new layer

If you can, help try the above in the inspector and see if it helps.

There are a few other possible culprits I have in mind which if you have the time you can try to disable/enable individually to see if they are causing the issue:

• CSS variables - disable the original property so that the browser will use the fallback constant value instead. The bg and font colors both use custom properties. This is a relatively new thing, so maybe Safari doesn't have this properly optimized.
• Hover and selection styles - disable the hover pseudo-selector and the selected item class on the list item (this may not be possible without cloning the repo and hacking the code to remove that). This is the only style that changes during scrolling, so it's a likely culprit. If there's any transition properties on the elements or their children, you can also try disabling those.