Bug 240216

Created attachment 459014 [details]
Exported codepen (use dist folder)

At befunky.com, we save image Blobs in IndexedDB so we can recover a user's photo editing progress if WebGL crashes. This often fails for returning users in Safari, and we finally figured out why.

Here are the exact steps to take to reproduce:

1. Save an image Blob in IndexedDB
2. Reload the page
3. Grab that image Blob and render it to a canvas (e.g. via  + ObjectURL)
4. Save the image Blob in IndexedDB again.

(sometimes) Repeat steps 2-4
You'll eventually reach a state where the image blob from IndexedDB cannot be read by FileReader, even though it has correct properties otherwise (e.g. size). To consistently replicate, it's important that:

- The page is refreshed between saving & getting blob
- The blob is rendered to Canvas before saving
- The blob is saved over itself (same IndexedDB key)

This is a bit tricky to replicate, so I created a reduced-test-case in a Codepen.
https://codepen.io/pranksinatra/pen/MWjRZOq?editors=1010

Alternative, you can download the attached zip file (use dist) folder to replicate on your local machine, or download it here:
https://codepen-api-export-production.s3.us-west-2.amazonaws.com/zip/PEN/MWjRZOq/1611347502267/safari-indexeddb-blob-bug.zip

Really appreciate the Safari/Webkit team looking into this. We've tried for years to pin down this issue and it causes a lot of user pain!

The original WebCompat report is here: https://github.com/webcompat/web-bugs/issues/66063#issuecomment-765870592