Cumulative Layout Shift (SEO) issue with ace editor

[khaven]

Describe the bug

An issue with CLS has been detected on webpages using the Ace editor. If I activate "layout shift region" and "core web vitals" options within the developer tools in Chrome, and then paste a large amount of text into the editor and scroll rapidly using the mouse wheel, the CLS score increases. This is detrimental to the website's SEO.

https://pasteboard.co/KZpX2pDDbL8o.jpg

Expected Behavior

CLS score doesn't go up.

Current Behavior

CLS score goes up when scrolling fast with mouse wheel.

Reproduction Steps

1. Go to https://ace.c9.io/build/kitchen-sink.html
2. Paste big text
3. Open chrome developer tools
4. Activate "layout shift region" and "core web vitals" in rendering tab
5. Scroll fast in editor with mouse wheel and see CLS score goes up.

Possible Solution

No response

Additional Information/Context

No response

Ace Version / Browser / OS / Keyboard layout

Current version, Chrome

[InspiredGuy]

I was able to reproduce it in Chrome on Windows but not on Mac. Could you please specify which OS were you using? The scrollbar on the screenshot you've provided looks like Windows. Also, when moving with keyboard layout shifts don't happen - there might be a difference in how we handle keyboard and mouse scroll.

For better understanding of the issue and it's severity for you, could you please add a bit of details how does it affect your SEO efforts negatively? I ran Lighthouse report for https://ace.c9.io/build/kitchen-sink.html and it's showing cumulative layout shift of 0.05 (Chrome, Windows). The behaviour you are describing is post load (so probably won't show up in metrics) and does not affect user experience since no visible layout shifts are happening, so it would be helpful to know how does this specific behaviour affect your case.

[khaven]

I was using Windows and the mouse scroll wheel to scroll. The Cumulative Layout Shift (CLS) is good on page load. However, the CLS score depends on the entire lifetime of a page, as stated here (https://web.dev/cls/) and also here (https://www.mediavine.com/cls-solving-for-cumulative-layout-shift/#:~:text=CLS%20measures%20how%20much%20your,such%20as%20DOM%20elements%20loading.), so it should affect the CLS score.

I'm using Ace on one of my websites, and it shows a bad CLS score for the pages using Ace on Google Search Console. However, when testing in Lighthouse, it shows a good CLS score. While it does not affect the user experience and no visible layout shifts happen when the page loads, layout shifts do occur in the editor when a user pastes a large code and scrolls using the scroll wheel. Chrome detects this and sends the CLS data and CLS is calculated based on that data.

https://developer.chrome.com/docs/crux/about/

[khaven]

Any update on this? Google is punishing me hard because of bad CLS score. My pageviews decreased a lot since google detected CLS issue on Google Search Console.