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