Ticket #12497 (closed bug: fixed)
jQuery 1.8.1 transitions crashing android 2.3.4 browser
| Reported by: | alanneilnix@… | Owned by: | alanneilnix@… |
|---|---|---|---|
| Priority: | low | Milestone: | 1.8.3 |
| Component: | effects | Version: | 1.8.1 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
The following code seems to be crashing the stock browser on Android 2.3.4 devices when using jQuery 1.8.1:
$(".feedback_active").fadeOut('slow', function(){
$("#feedback_" + feedback_id).fadeIn().addClass('feedback_active');
}).removeClass('feedback_active');
I have reverted back to 1.7.2 and things are working normally for now.
Change History
comment:1 Changed 9 months ago by mikesherov
- Owner set to alanneilnix@…
- Status changed from new to pending
comment:2 Changed 9 months ago by alanneilnix@…
- Status changed from pending to new
Here is the jsfiddle: http://jsfiddle.net/Y5F7C/1/
I was able to reproduce the issue on my phone with jQuery (edge) as well. Just some more info, I'm using a HTC Incredible 2 (Incredible S outside the US) on Android 2.3.4 with the stock browser.
comment:3 Changed 9 months ago by alanneilnix@…
Any update on this? Were you able to reproduce the problem with the provided jsfiddle?
comment:4 Changed 9 months ago by dmethvin
- Status changed from new to pending
I have Android 2.3.6 on a Nexus One and it seems to work fine. Can you describe what is happening when it "crashes"?
Also, in general the code there is a very bad pattern to follow because it is assuming the animations will complete within the setTimeout interval. Code like this is why we had to back out our requestAnimationFrame support. Instead, have the completion callback set the timer for example.
comment:5 Changed 9 months ago by alanneilnix@…
- Status changed from pending to new
Thanks for the input, I updated the jsfiddle to setTimeout in the callback for the fadein. http://jsfiddle.net/Y5F7C/3/
I'm still getting the issues with the stock Android browser on 2.3.4 though.
The page loads, and then after about 7 seconds (when the animation would start) the browser crashes and dumps me back to the home screen.
comment:6 Changed 9 months ago by dmethvin
- Priority changed from undecided to low
- Status changed from new to open
- Component changed from unfiled to effects
Well, that DOES sound like a crash. :)
I can't repro it on Android 2.3.6 using either the original or revised fiddle though. I'll mark the ticket open and see if we can find someone else who also encounters this in 2.3.4.
comment:7 Changed 9 months ago by alanneilnix@…
Hey Guys - just checking to see if this has been reproduced yet. I'm still having the issue on the latest build.
comment:8 Changed 9 months ago by dmethvin
I have a real Nexus One with 2.3.6 which works fine. I ran the emulators for Droid Razr (2.3.5) and the Moto Defy Plus (2.3.4) and both are working. So no repro yet.
Just to be clear, you're saying that this test case using jquery-git.js (the most recent build) crashes back to the home screen after 7 seconds when the animation starts:
http://jsfiddle.net/Y5F7C/3/ (add show to the URL to remove jsfiddle UI)
comment:9 follow-up: ↓ 10 Changed 9 months ago by jason@…
I've received reports of this error too from a couple of our users running. One was using Android 2.3.5. Their UA is shown as:
Mozilla/5.0 (Linux; U; Android 2.3.5; en-us; PantechP9070 Build/GRJ90) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
So maybe it's the specific phone or specific build of Webkit? But it definitely appears to be related directly to the fade transition because we are doing something almost identical to what was reported in the jsfiddle provided by alanneilnix, and the user is reporting the same crash error.
comment:10 in reply to: ↑ 9 Changed 9 months ago by jason@…
Replying to jason@…:
I've received reports of this error too from a couple of our users running. One was using Android 2.3.5. Their UA is shown as:
Mozilla/5.0 (Linux; U; Android 2.3.5; en-us; PantechP9070 Build/GRJ90) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
So maybe it's the specific phone or specific build of Webkit? But it definitely appears to be related directly to the fade transition because we are doing something almost identical to what was reported in the jsfiddle provided by alanneilnix, and the user is reporting the same crash error.
As an additional note, this bug does not occur in 1.7.2, however, does in 1.8.1 and 1.8.2.
comment:11 Changed 8 months ago by crowkeep@…
I'm seeing this crash behavior across a spectrum of Japanese carrier issued handsets (au/DoCoMo/SoftBank), using jQuery 1.8.2.
I'm seeing crashes occur as outlined in the conditions above in the following models, thus far:
'IS11PT', 'N-01D', 'L-01D', 'F-10D', 'ISW13'
All of the above are either Android 2.3.4/2.3.5 excepting the ISW13 which is Android 4.0.3
Mozilla/5.0 (Linux; U; Android 2.3.4; ja-jp; IS11PT Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
The above is the only full user agent string I can currently grab (I'll try and fill in the others when I get a chance).
comment:12 Changed 8 months ago by anonymous
Seeing the same thing, crashes on a T-Mobile myTouch running Andorid 2.3.6
comment:13 Changed 7 months ago by luke@…
I've confirmed this crashing bug on an LG Esteem running Android 2.3.4 and simplified the fiddle: http://jsfiddle.net/Y5F7C/12/
Perusing the commits since 1.7.2, I'd guess it is this one: https://github.com/jquery/jquery/commit/58ed62ed12cb48d9224f699e86e197804ca5ece4#src/effects.js
comment:14 Changed 7 months ago by luke@…
I've narrowed this down to this line of code:
https://github.com/jquery/jquery/blob/58ed62ed12cb48d9224f699e86e197804ca5ece4/src/effects.js#L93
| 0". If anyone is reading this who has insight into what this bit is supposed to be accomplishing, please chime in |
comment:15 Changed 7 months ago by gibson042
The || 0 forces percent to be numeric and lets us complete the animation when the preceding division yields NaN (e.g., from 0 duration). Can you describe the problem in more detail?
comment:16 Changed 7 months ago by luke@…
I've posted some more information and a proposed fix as a Pull Request here: https://github.com/jquery/jquery/pull/1019
This is clearly a browser bug, and a pretty bad one. Here is a fiddle without jQuery included at all that will crash browsers with this bug: A simple example (without jQuery) of JS that will trigger this crashing browser bug is here: http://jsfiddle.net/wCQvh/
comment:17 Changed 7 months ago by anonymous
My Android 2.1-update1 phone has no issues with any of these fiddles.
comment:18 Changed 7 months ago by gabriel@…
Here are two jsPerfs that compare the performance of the different ways to perform the offending calculation identified by Luke. This one will cause the crash on affected devices. http://jsperf.com/ab0/2
This one removes the offending calculations and does not crash on affected devices. http://jsperf.com/ab0/3
comment:19 Changed 7 months ago by Corey Frang
- Status changed from open to closed
- Resolution set to fixed
Unroll the ( || ) in the math - Fixes #12497 - Thanks @lukemella @curiousdannii - Closes gh-1019
Changeset: 877306738f931a711c41d907e69fc8930f985830
comment:20 Changed 7 months ago by Corey Frang
Unroll the ( || ) in the math - Fixes #12497 - Thanks @lukemelia @curiousdannii - Closes gh-1019 (cherry picked from commit 877306738f931a711c41d907e69fc8930f985830)
Changeset: 70f662bac5de1ed76021e31387bd4d3aa2e41f66
comment:22 Changed 7 months ago by anonymous
That was a nasty bug!!!!!!!!
comment:23 Changed 7 months ago by anonymous
Confirmed it was happening to me as well with Android 2.3.6 Samsung Mobile Boost
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket.
Additionally, be sure to test against the jQuery git("edge") version to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/FrKyN/. Open the link and click to "Fork" (in the top menu) to get started.