172533 2017-05-23 19:54:41 -0700 Camera/Canvas file input crash: A Problem Occurred with this Webpage so it was Reloaded 2022-07-28 09:38:50 -0700 1 1 1 Unclassified WebKit Canvas Safari 10 iPhone / iPad iOS 10 RESOLVED WORKSFORME InRadar P2 Normal --- 1 zac.spitzer webkit-unassigned alban.seurat dhsttryy dino fnicolicds ixevix jwhn91 manian rmondello robert sabouhallawa simon.fraser thorton webkit-bug-importer oldest_to_newest 1312171 0 zac.spitzer 2017-05-23 19:54:41 -0700 When taking a photo using HTML file input with an iPhone, Safari often crashes cryptically with the "A Problem Occurred with this Webpage so it was Reloaded". It seems this is due to an out of memory error, crash logs include reason:vm-thrashing It may be related to canvas resizing, as the captured image, especially with the iPhone's higher megapixel camera producing much larger files that usually need to be resized before uploading I did some research on github and people have been experiencing similar problems https://github.com/kobotoolbox/enketo-express/issues/398 https://github.com/scottcheng/cropit/issues/226 https://github.com/Foliotek/Croppie/issues/243 this blog post goes into a lot of detail about this problem http://digitalservicescompany.com/blog/case-study-image-resize-in-a-browser/ 1312191 1 simon.fraser 2017-05-23 22:08:50 -0700 What iOS versions and which iOS devices show the problem? 1312196 2 zac.spitzer 2017-05-23 22:26:57 -0700 Been seeing this problem occur on a iPhone 6 running 10.3.1, one user dropped back to an iPhone 5 with 10.3.1 and it didn't happen for a while, but then it started happening again. I can't reproduce this on an iPad (guessing due to smaller camera) It was also happening with 9.3.x 1312348 3 webkit-bug-importer 2017-05-24 12:01:33 -0700 <rdar://problem/32383118> 1313631 4 zac.spitzer 2017-05-29 21:14:52 -0700 another crash example https://github.com/kangax/fabric.js/issues/3693 1313840 5 simon.fraser 2017-05-30 13:32:42 -0700 I filed bug 172728 about https://github.com/kangax/fabric.js/issues/3693 1313973 6 simon.fraser 2017-05-30 19:12:50 -0700 It would be helpful to provide URLs where the issues reported in the links in the first comment can be reproduced. After analyzing https://github.com/kangax/fabric.js/issues/3693 in some detail, I believe it's not directly related, unless all the other sites are using the fabric canvas library. 1313977 7 zac.spitzer 2017-05-30 19:22:13 -0700 I just reproduced the crash on the "Upload Example (with exif orientation compatability)" demo here http://foliotek.github.io/Croppie/ (near the bottom of the page) with an iPad running 10.3.2, you need to take quite a few photos (sorry I didn't keep an exact count!) and then it reloads 1313978 8 zac.spitzer 2017-05-30 19:25:49 -0700 this also crashes after taking 5 photos http://scottcheng.github.io/cropit/ using the first demo on the page, iPad 10.3.2 1314083 9 simon.fraser 2017-05-30 21:12:13 -0700 Thanks, I'll try those. 1314311 10 simon.fraser 2017-05-31 14:02:10 -0700 (In reply to zac spitzer from comment #8) > this also crashes after taking 5 photos http://scottcheng.github.io/cropit/ > using the first demo on the page, iPad 10.3.2 Do you mean that you tap the "Choose File" button once, take a photo, and then take 4 more photos using the "Retake" button in the camera UI? Or something else? 1314324 11 simon.fraser 2017-05-31 14:31:14 -0700 (In reply to zac spitzer from comment #7) > I just reproduced the crash on the "Upload Example (with exif orientation > compatability)" demo here http://foliotek.github.io/Croppie/ (near the > bottom of the page) with an iPad running 10.3.2, you need to take quite a > few photos (sorry I didn't keep an exact count!) and then it reloads I reproduced it here. Thanks! 1314465 12 zac.spitzer 2017-05-31 17:24:30 -0700 another similar problem with some detailed investigation via xcode https://github.com/mapbox/mapbox-gl-js/issues/4695#issuecomment-305304043 1314469 13 simon.fraser 2017-05-31 17:37:10 -0700 Interesting but let's not pile everything onto this bug. Please file a new bug for https://github.com/mapbox/mapbox-gl-js/issues/4695 1320630 14 ixevix 2017-06-19 01:58:05 -0700 Happens on iOS 9.3.5 as well 1323178 15 simon.fraser 2017-06-27 11:34:57 -0700 http://foliotek.github.io/Croppie/ creates a 3024x4032 canvas, which is 418MB, which is one reason why the web process gets killed. 1323378 16 simon.fraser 2017-06-27 19:47:46 -0700 http://foliotek.github.io/Croppie/ also has an <img clas="cr-image"> with a 3D transforms and a 1280 x 720 image, which creates a layer of 2x or 3x that size (depending on device resolution), which also eats a lot of memory. So I think the http://foliotek.github.io/Croppie page is just using too much memory for images, layer backing store and and canvas. 1323380 17 simon.fraser 2017-06-27 19:51:37 -0700 http://scottcheng.github.io/cropit/ is also very memory hungry, with <img class="cropit-preview-background"> taking 209MB, and <img class="cropit-preview-image"> taking 188MB. 1323381 18 zac.spitzer 2017-06-27 19:54:06 -0700 But they work first time, why does it crash only after several attempts? 1323384 19 simon.fraser 2017-06-27 19:55:27 -0700 I haven't figure that part out yet :) 1336376 20 zac.spitzer 2017-08-07 22:58:17 -0700 Sorry to pester, but any progress on this? I have some very frustrated clients who are contemplating buying Android devices 1336678 21 dino 2017-08-08 15:13:00 -0700 (In reply to zac spitzer from comment #20) > Sorry to pester, but any progress on this? > > I have some very frustrated clients who are contemplating buying Android > devices Nothing to report yet. We'll get to it soon. 1394539 22 zac.spitzer 2018-01-30 07:49:27 -0800 any updates? so many developers are battling against this bug and wasting hours trying to find workarounds 1394692 23 simon.fraser 2018-01-30 12:55:03 -0800 In my investigations, this was mostly caused by web pages creating very large canvas elements (or leaking canvases, in the case of Fabric.js). If this affects your content, the best option is to optimize canvas memory usage. 1394701 24 zac.spitzer 2018-01-30 13:21:36 -0800 So why is this only a problem with Safari and only after processing several images via canvas? I've been using https://github.com/gokercebeci/canvasResize and have tried manually setting every canvas object to null, but Safari still just runs out of memory and crashes Neither Chrome or Firefox on Android exhibit this problem? Is a Native API for image resizing needed? Modern cameras produce really large images and they need to be down sized before being uploaded and currently Canvas is the only option 1514756 25 robert 2019-03-11 06:48:52 -0700 Its crashing for we without canvas being used, just a pure JS target.files and POST with payload in the body. iPhone 8, iOS 12.1 1514759 26 robert 2019-03-11 07:11:26 -0700 (In reply to Bobby from comment #25) > Its crashing for we without canvas being used, just a pure JS target.files > and POST with payload in the body. iPhone 8, iOS 12.1 Now tested with iOS 12.1.4, same crash. Photo size from 1.6meg to 2.4meg. First photo almost always works, subsequent photos consistently crash (second, third) 1514976 27 simon.fraser 2019-03-11 13:45:49 -0700 (In reply to Bobby from comment #26) > (In reply to Bobby from comment #25) > > Its crashing for we without canvas being used, just a pure JS target.files > > and POST with payload in the body. iPhone 8, iOS 12.1 > > Now tested with iOS 12.1.4, same crash. Photo size from 1.6meg to 2.4meg. > First photo almost always works, subsequent photos consistently crash > (second, third) Do you have a URL we can test with? 1570552 28 alban.seurat 2019-09-13 05:03:53 -0700 I have the same issue with my iPhone 8 with iOS 12.4.1 Any website using <input type=file> is crashing safari after 2 or more takes (probably depending on the memory availability at the time. You can simply try to take several photos (without submitting them) there for instance: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_accept 1669506 29 sabouhallawa 2020-07-07 13:25:22 -0700 I tried the following links https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_accept http://scottcheng.github.io/cropit/ http://foliotek.github.io/Croppie/ On iPad Air 2/trunk webkit and I could not reproduce the crash after taking at least 10 photos. 1669520 30 sabouhallawa 2020-07-07 13:59:53 -0700 I will try these scenarios on iPhone 6 Plus which is more memory restricted. 1669570 31 sabouhallawa 2020-07-07 15:49:55 -0700 On iPhone 6 Plus/iOS 14/Trunk WebKit, I was able to take over 20 photos with the following pages: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_accept http://foliotek.github.io/Croppie/ And no crashes happened. 1887351 32 fnicolicds 2022-07-28 09:38:50 -0700 Seems that this issue is still happening on iOS 15. I was able to make the web content process crash just by taking photos (around 40) on my iPhone X iOS 15.4.1 with the following page: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_accept