Slow when expanding and unexpanding images

[umonaca]

Expected behaviour

On mobile Chrome, they should be at least as quick as on the computer.

Actual behaviour and steps to reproduce the problem

The more images I have on TL, the more likely this problem will happen. The more posts that I have scrolled through, the more likely this problem will happen. It may not happen if I have only read a few posts.

On Chrome mobile, when clicking images to expand, the entire page or even the browser itself freezes for a while (from 1 second to 10+ seconds, depending on how many posts I have read and how many images I have expanded before). After the image is fully loaded, I click the area outside the image to unexpand, then it still takes a while (same as above) to go back to normal.

Sometimes if I have viewed too many posts, the entire browser will freeze when I click to expand an image or unexpand an image. Or even worse, I have to stop the browser and start it again.

Specifications

This happens on multiple instances, including mastodon.social and my own server. So I don't think it's a problem of network delay. I think there might be some memory leak in React or problematic media queries which are causing the trouble.

I think the major reason many people choose to use an mobile app instead of the WebUI is that the WebUI is slow on mobile devices. For me the PWA still has the same problem as in the Chrome browser. I have tried two Android devices and at least three different instances, so I don't think it's a device issue (I have high-end devices) or network issue (mastodon.social and my own instance is quick on PCs).

Chrome 83.0.4103.106 (latest version on Google Play) on multiple Android devices, one of them is a Google Pixel 4 XL running stock Android 10

I have tried Firefox. It freezes less frequently but sometimes it still happens.

[ClearlyClaire]

I have noticed slowdowns on opening and closing modals, but never anything as severe. I wonder if it may be the same issue, though, and further made worse by the fact that you're using the single-column mode (leading to a larger web page).

If you have the ability to set user styles (or modify your instance's style), could you try the following?

.modal-root {
  transition: unset !important;
  will-change: unset !important;
}

[umonaca]

I have tested on my own instance. Yes it feels much better, at least my Chrome mobile did not freeze during the period of my testing. I am not sure if the problem is solved because the problem that I described above requires me to read a lot more pic posts to reproduce. I will report the result back later.

Note: It is easier to reproduce the problem if most of the users you follow post pics rather than plain text.

I remember seeing some warnings about "will-change" in browser console on older version of Mastodon. Cannot find it now though.

[umonaca]

The drawback of this CSS patch is that it is easier to see the pic "flashing" when trying to expand an image if using Advanced web interface on Firefox on PC. It is expected since all transitions are removed. The "flashing" is minimal on Chrome, however.

[Gargron]

It kind of sounds like opening a modal re-renders all of the other components as well even though that's not supposed to happen. Wonder if it could have anything to do with page width and whatever we're doing to make it unscrollable. Like does it momentarily cause some width re-calculation on all status components? Just guessing though.

[ClearlyClaire]

Hmm, that wouldn't explain disabling the transition fixing this. My hunch is simply that the whole transition thing is very expensive, and even more so the longer we have vertical scroll, as the modal overlay has the full height of the page. I'm not too sure how it works, but I think the browser may try to allocate a surface the size the page in video memory to render the animation? (especially with will-change?)