Safari re-snapping repeatedly on Twitter timeline after adding scroll snap user styles

[Šime Vidas]

Steps to reproduce: 

1. Open https://twitter.com/home
2. Run the following code in the JS console to inject scroll snap user styles to page:

    document.body.insertAdjacentHTML(
    "beforeend",
    `
    <style>
    html {
        scroll-snap-type: y proximity !important;
    }

    article {
        scroll-snap-align: start !important;
    }

    [aria-label="Home timeline"] > :first-child {
        position: static !important;
        scroll-snap-align: start !important;
    }

    [aria-label="New Tweets are available."] {
        display: none !important;
    }
    </style>
    `
    );

3. Start scrolling the page down repeatedly.

What happened?

At certain points, Safari will start re-snapping different tweets to the top while the user is doing nothing.

I have recorded a video of the issue: https://www.youtube.com/watch?v=i99ADUX9uak

[Šime Vidas]

I forgot to mention how other browsers behave after adding scroll snap to the Twitter timeline:

- In Chrome, it works well, although there is an issue with fast scrolling.

- In Firefox, it works the best, but re-snapping has not shipped in Firefox yet.

[Karl Dubost]

Thanks Šime for the report.

Step 0.
Need to be logged in on Twitter ;) 


So yes I can confirm, It is required to scroll fast and have scroll a certain amount of content. It seems partially related to reloading of the content. When the content disappears and reappears on the timeline (when out of the view) because of the scroll.

[Karl Dubost]

Oh and each time this is happening it seems there is a Full Garbage Collection showing in the timeline tool.

[Radar WebKit Bug Importer]

<rdar://problem/97580072>