Slow scrolling on Film Page (Macbook M1, Chrome) - Problem identified

Hi!

I am reaching out to report an observed performance issue while using the film page (e.g., https://www.imdb.com/title/tt7631058/?ref_=nv_sr_srsg_0_tt_7_nm_1_q_lord) on my Macbook M1 (2021) using Chrome. It is important to note that this issue does not seem to occur on Safari.

Upon careful examination, I noticed a significant slowdown in scrolling, making me curious to investigate the root cause of this behaviour. Interestingly, the scrolling became noticeably smoother beyond the first black block (see screenshot below). This observation led me to believe that the issue might be related to the styling of the black block.

Upon inspecting the HTML elements and associated styling, I identified a specific element: <div class='sc-e226b0e3-1 fakEOk'>, as shown in the second screenshot below. This element has the styling property backdrop-filter: blur(50px) saturate(100%);, which, when disabled, resulted in a smooth scrolling experience (yeah!).

To temporarily resolve the problem and ensure a smooth user experience, I have injected the following CSS on every page using a Chrome extension:

* {backdrop-filter: none !important;}

Given the dynamic nature of CSS classes, I chose for a wildcard CSS selector to address any changes (this selector should not be used in production naturally). This CSS-adjustment is reflected in the appearance of the website, as shown in the screenshot below.

Of course, this solution comes with a trade-off – removing the blur filter has resulted in a heavily pixelated background picture.

I am looking forward to any insights or solutions 🙂

Best regards,

Diederik