WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED WORKSFORME
Bug 172533
Camera/Canvas file input crash: A Problem Occurred with this Webpage so it was Reloaded
https://bugs.webkit.org/show_bug.cgi?id=172533
Summary
Camera/Canvas file input crash: A Problem Occurred with this Webpage so it wa...
zac spitzer
Reported
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/
Attachments
Add attachment
proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1
2017-05-23 22:08:50 PDT
What iOS versions and which iOS devices show the problem?
zac spitzer
Comment 2
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
Radar WebKit Bug Importer
Comment 3
2017-05-24 12:01:33 PDT
<
rdar://problem/32383118
>
zac spitzer
Comment 4
2017-05-29 21:14:52 PDT
another crash example
https://github.com/kangax/fabric.js/issues/3693
Simon Fraser (smfr)
Comment 5
2017-05-30 13:32:42 PDT
I filed
bug 172728
about
https://github.com/kangax/fabric.js/issues/3693
Simon Fraser (smfr)
Comment 6
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.
zac spitzer
Comment 7
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
zac spitzer
Comment 8
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
Simon Fraser (smfr)
Comment 9
2017-05-30 21:12:13 PDT
Thanks, I'll try those.
Simon Fraser (smfr)
Comment 10
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?
Simon Fraser (smfr)
Comment 11
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!
zac spitzer
Comment 12
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
Simon Fraser (smfr)
Comment 13
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
Krister Bäckman
Comment 14
2017-06-19 01:58:05 PDT
Happens on iOS 9.3.5 as well
Simon Fraser (smfr)
Comment 15
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.
Simon Fraser (smfr)
Comment 16
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.
Simon Fraser (smfr)
Comment 17
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.
zac spitzer
Comment 18
2017-06-27 19:54:06 PDT
But they work first time, why does it crash only after several attempts?
Simon Fraser (smfr)
Comment 19
2017-06-27 19:55:27 PDT
I haven't figure that part out yet :)
zac spitzer
Comment 20
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
Dean Jackson
Comment 21
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.
zac spitzer
Comment 22
2018-01-30 07:49:27 PST
any updates? so many developers are battling against this bug and wasting hours trying to find workarounds
Simon Fraser (smfr)
Comment 23
2018-01-30 12:55:03 PST
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.
zac spitzer
Comment 24
2018-01-30 13:21:36 PST
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
Bobby
Comment 25
2019-03-11 06:48:52 PDT
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
Bobby
Comment 26
2019-03-11 07:11:26 PDT
(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)
Simon Fraser (smfr)
Comment 27
2019-03-11 13:45:49 PDT
(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?
Alban Seurat
Comment 28
2019-09-13 05:03:53 PDT
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
Said Abou-Hallawa
Comment 29
2020-07-07 13:25:22 PDT
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.
Said Abou-Hallawa
Comment 30
2020-07-07 13:59:53 PDT
I will try these scenarios on iPhone 6 Plus which is more memory restricted.
Said Abou-Hallawa
Comment 31
2020-07-07 15:49:55 PDT
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.
fnicolicds
Comment 32
2022-07-28 09:38:50 PDT
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
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug