Bug 285576
| Summary: | REGRESSION(282648@main): A tweet with 12000+ emojis takes Safari forever to display | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | cueball045 |
| Component: | DOM | Assignee: | Said Abou-Hallawa <sabouhallawa> |
| Status: | RESOLVED FIXED | ||
| Severity: | Minor | CC: | fantasai.bugs, karlcow, rniwa, sabouhallawa, simon.fraser, vitor.roriz, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 18 | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | macOS 15 | ||
cueball045
A reply[1] to this parent tweet[2] shows some crab emojis. On clicking "Show more", Safari takes a good upwards of 10 seconds to open and show the entire tweet.
Firefox and Chrome are much snappier in comparison (this also could be because I tested this on a new launch of these browsers but I was using Safari with multiple tabs already).
Regardless, I would not expect Safari to be so laggy. The tweet has 12,090 🦀 emojis which is roughly 48.36 KB.
Steps to reproduce:
1. Visit the parent tweet[2]
2. Scroll down to find a comment by the account @Jonathan_Blow which is just lots of 🦀.
3. Click "Show more".
[1] https://x.com/Jonathan_Blow/status/1876748466908787124
[2] https://x.com/ThePrimeagen/status/1876739118350111093
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/142638658>
alan
It looks like we are busy with appending all those images elements to DOM.
Ryosuke Niwa
I've confirmed that the tweet in question (https://x.com/Jonathan_Blow/status/1876748466908787124) almost instantly loads at 282640@main.
We're spending most of our time inside elementTextDirectionState and in particular, looking up dir attribute in Element::findAttributeByName.
I'm having a trouble making a reproduction out of it though. Naively appending a bunch of img elements like this doesn't seem to fully replicate the pathology:
<!DOCTYPE html>
<html>
<body>
<style> img { width: 1.2em; height: 1.2em; } </style>
<div id="container" dir="auto" lang="qme"><p id="tail" dir="ltr">tail</p></div>
<script>
onload = () => {
requestAnimationFrame(() => {
for (let i = 0; i < 12000; ++i) {
const img = document.createElement('img');
img.alt = '🦀';
img.src = 'https://abs-0.twimg.com/emoji/v2/svg/1f980.svg';
img.setAttribute('draggable', 'false');
img.setAttribute('class', 'r-4qtqp9 r-dflpy8 r-k4bwe5 r-1kpi4qh r-pp5qcn r-h9hxbl');
container.insertBefore(img, tail);
}
});
}
</script>
</body>
</html>
Said Abou-Hallawa
Pull request: https://github.com/WebKit/WebKit/pull/46151
EWS
Committed 301333@main (50da6f725760): <https://commits.webkit.org/301333@main>
Reviewed commits have been landed. Closing PR #46151 and removing active labels.