Bug 172533

Summary: Camera/Canvas file input crash: A Problem Occurred with this Webpage so it was Reloaded
Product: WebKit Reporter: zac spitzer <zac.spitzer>
Component: CanvasAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: dhsttryy, dino, ixevix, manian, rmondello, simon.fraser, thorton, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 10   
Hardware: iPhone / iPad   
OS: iOS 10   

Description zac spitzer 2017-05-23 19:54:41 PDT
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/
Comment 1 Simon Fraser (smfr) 2017-05-23 22:08:50 PDT
What iOS versions and which iOS devices show the problem?
Comment 2 zac spitzer 2017-05-23 22:26:57 PDT
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
Comment 3 Radar WebKit Bug Importer 2017-05-24 12:01:33 PDT
<rdar://problem/32383118>
Comment 4 zac spitzer 2017-05-29 21:14:52 PDT
another crash example
https://github.com/kangax/fabric.js/issues/3693
Comment 5 Simon Fraser (smfr) 2017-05-30 13:32:42 PDT
I filed bug 172728 about https://github.com/kangax/fabric.js/issues/3693
Comment 6 Simon Fraser (smfr) 2017-05-30 19:12:50 PDT
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.
Comment 7 zac spitzer 2017-05-30 19:22:13 PDT
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
Comment 8 zac spitzer 2017-05-30 19:25:49 PDT
this also crashes after taking 5 photos http://scottcheng.github.io/cropit/ using the first demo on the page, iPad 10.3.2
Comment 9 Simon Fraser (smfr) 2017-05-30 21:12:13 PDT
Thanks, I'll try those.
Comment 10 Simon Fraser (smfr) 2017-05-31 14:02:10 PDT
(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?
Comment 11 Simon Fraser (smfr) 2017-05-31 14:31:14 PDT
(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!
Comment 12 zac spitzer 2017-05-31 17:24:30 PDT
another similar problem with some detailed investigation via xcode
https://github.com/mapbox/mapbox-gl-js/issues/4695#issuecomment-305304043
Comment 13 Simon Fraser (smfr) 2017-05-31 17:37:10 PDT
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
Comment 14 Krister B├Ąckman 2017-06-19 01:58:05 PDT
Happens on iOS 9.3.5 as well
Comment 15 Simon Fraser (smfr) 2017-06-27 11:34:57 PDT
http://foliotek.github.io/Croppie/ creates a 3024x4032 canvas, which is 418MB, which is one reason why the web process gets killed.
Comment 16 Simon Fraser (smfr) 2017-06-27 19:47:46 PDT
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.
Comment 17 Simon Fraser (smfr) 2017-06-27 19:51:37 PDT
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.
Comment 18 zac spitzer 2017-06-27 19:54:06 PDT
But they work first time, why does it crash only after several attempts?
Comment 19 Simon Fraser (smfr) 2017-06-27 19:55:27 PDT
I haven't figure that part out yet :)
Comment 20 zac spitzer 2017-08-07 22:58:17 PDT
Sorry to pester, but any progress on this? 

I have some very frustrated clients who are contemplating buying Android devices
Comment 21 Dean Jackson 2017-08-08 15:13:00 PDT
(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.