iPhone Safari crashes or reloads on my scroll animation: why and how to fix it

Short answer: Safari on iPhone reloads the page (or shows "A problem repeatedly occurred") when a tab uses too much memory, and image sequences are a classic cause. Every frame is decoded into raw pixels at width × height × 4 bytes. Fix it with fewer and smaller frames, a separate mobile frame set, not holding every frame decoded at once, and avoiding large PNGs.

Why does Safari reload the page?

iOS gives each Safari tab a limited amount of memory and doesn't swap the way a desktop does. When a tab goes over its budget, iOS kills the web content process. Safari then reloads the page automatically, and if it happens again you get "A problem repeatedly occurred."

It often feels random because it depends on the device, how many other tabs are open, and how far you've scrolled.

Why do image sequences use so much memory?

The file you download is compressed. To draw it, the browser decodes it into raw pixels:

width × height × 4 bytes

• 1920×1080 → about 8.3 MB per frame
• 150 frames held decoded → about 1.2 GB

Compression (WebP, JPG, AVIF) doesn't change this number. A 30KB WebP and a 3MB PNG at the same dimensions take the same memory once decoded.

How to fix it

1. Do not store frames in memory Avoid createImageBitmap for every frame.
2. Use smaller frames on phones. Around 800–1000px wide, not the full desktop size.
3. Serve a separate mobile frame set, ideally a portrait crop. Scrollsequence v2 supports multi-resolution sequences for this.
4. Don't hold every frame decoded. If you write your own code, keep a window of frames around the current position and release the rest, rather than keeping hundreds of Image or ImageBitmap objects alive. (Call .close() on ImageBitmaps you no longer need.)
5. Avoid giant PNGs. They're slow to download and decode. Use JPG or WebP when you need transparency.
6. Cap the canvas resolution. Sizing the canvas to a 3× device pixel ratio multiplies its memory by 9 compared to 1×. Cap DPR at around 1.5–2.

How do I check it's fixed?

Test on a real iPhone, not just desktop responsive mode, which uses your computer's memory. Scroll the animation fast, several times, with a few other tabs open. If you have a Mac, Safari's Web Inspector (connected to the iPhone) can show memory use while you scroll.

For lag and blank frames that aren't crashes, see the full list: image sequence lagging on mobile? 9 fixes.

Related reading

• Image sequence lagging on mobile? 9 fixes
• How many frames does a scroll animation need?
• WebP vs PNG vs JPG for image sequences
• Why your AI-built scroll animation lags

FAQ

Why does it only crash on iPhone and not Android or desktop? iOS is strict about per-tab memory and kills the tab rather than slowing down. Low-memory Android phones can do the same; desktops have more memory and swap.

Will switching from PNG to WebP fix the crash? It helps download and decode speed, but decoded memory depends on dimensions. You also need smaller frames or fewer of them held at once.

Is this a Safari bug? No, it's how iOS manages memory. The fix is to use less of it.

Can I just show a video on iPhone instead? A normally playing video or a static image is a fine fallback. Scrubbing a video with scroll tends to stutter, so a light mobile image sequence is usually better.