We just got hold of a Samsung Galaxy S4 for testing our mobile website (running latest Touch-Wiz Android 4.2.2 - build JDQ39).
Straight away we noticed some major issues in our site. After some investigation, I discovered that this seems to be due to window.setInterval(fn, repeatInterval) not repeating, and only calling the passed function once.
Please note, there probably isn't a problem with our usage of setInterval, as our code works on all our other devices (lots), the chrome browser on the same device, and on desktop browsers.
I've searched, but can't find any mention of this problem. It seems bizarre to me that such a major bug would not have generated more noise.
My question is: Has anyone else seen this problem? Is it the default browser on 4.2.2, or a Touch-Wiz specific problem? Did you find an elegant work-around?
I've come up with a work-around using self-perpetuating setTimeout(s) but it's a bit nasty, and I'd rather not have to do it like that.
Turns out it wasn't actually setInterval's fault at all. Weirdly enough eval.call(window, 'some js'); seems to stop all intervals from working on this particular browser. Really don't understand how. This is the only phone we've seen it on - it doesn't happen on the stock browser on the S3 (Android 4.2.1).
P.S. The only reason we're doing eval.call is to allow make banner ads which use document.write to add scripts in a one page dynamic loading app. I'd much rather it wasn't there.
Related
I am looking at trying to scan barcodes from a mobile device.
I been doing some research and I having hard time finding JavaScript libraries that can do this.
I see these projects
zxing
This seems to be no longer in development and just bugs fixes are done?
QuaggaJS
This one, I am not sure if it is development either anymore as changelog is from 2017
quagga2
This seems to be a fork of the one above? So this might be the better choice to go with vs the 2?
What I am trying to achieve is this. I want to go on an andriod device (think phone, maybe tablet), load up chrome or firefox, go to my site click a button and load up the devices camera and scan a bar code (mostly EAN-8/13).
I want to do the same thing on apple devices (iphone and ipad), load up safari (not sure if they got chrome and Firefox on these devices. I don't own apple), click a button and load up their devices cameras and scan a bar code.
I think this is possible in all the libraries I listed above, but I am still unclear if this is possible on apple devices? I read somewhere that before ios 14 it would not be possible?
I am open to other libaries, I can use Jquery, vanilla javascript and I think angular (but I think it is version 3).
Just been doing this same research myself. All of those open source ones you listed seem to be either dead or have performance/reliability issues. Looks like only the commercial versions are really viable at the moment:
Dynamsoft - https://www.dynamsoft.com/store/dynamsoft-barcode-reader/
Scanbot - https://scanbot.io/products/barcode-software/web-barcode-scanner/
There are also two different mobile apps that are viable. These are web apps that just display a browser view and make a barcode scanning function from the app itself available on the page:
https://berrywing.com/scan-to-web-app/
https://www.mochasoft.dk/iphone_barcode2.htm
The second one has a more capable JS API of the two.
UPDATE: I went with that last option from Mochasoft. Turned out quite well.
Update 2018-03-01:
This issue has apparently been fixed in version 66. Tested a number of pages in Android Chrome Dev and Canary, no crashes observed even during long and/or heavy runs. I never did find a workaround, however 66 should be hitting Chrome Beta soon, and not too long after Stable so normal users should be able to run them again on Android in the regular version of Chrome within a few(ish) weeks. Incidentally, this is the same update that Chrome will fully discontinue trust in Symantec-CA-based HTTPS/SSL certs. I have noticed it seems slightly janky in comparison to before, but will have to test as this could be merely subjective on my part, or due to changes in my code looking for workarounds. Further info can be found in the Chromium Bug report linked to below.
** Note: If you've followed this post... I have to admit I thought I had a workaround by rounding values to only two decimals out. However, I later realized this was causing a side-effect (because of an optimization I had made) of scale3d-ing some elements to 0,0,0, essentially causing them not to be rendered, and thus not triggering the problem for a long time. When I temporarily removed scaling, said elements rendered again, and the bug was triggered. Deep andhumble appologies, but-- problem not solved. So, I have removed my answer. Here are some things I have tried, none of which were successful:
Rounding transform decimal values to x.xx, two digits out.
Rounding transform values to straight integers.
Using setInterval instead of RAF to see if that was a factor (ugh!).
Using a style tag and .innerHTML to set dynamic transforms via css instead of the DOM (this was surprisingly efficient, but still triggered a crash just the same.
I've tried narrowing it down to particular transform parameters, numerical patterns, element nesting depths, just about anything I can think of to get around triggering a crash, and it looks like there is only one pattern: every time you do a transform there is a chance of a crash. It's a seemingly tiny probability, but doing scripted animations, even if you optimize to prevent repeats of identical transforms, makes the crash inevitable. I can make it take longer, but I can't prevent it.
Now, I've seen similar reports all over the web regarding recent problems with CSS in Chrome since November, when version 62 update was pushed on the stable channel. This last test, using a dynamically generates, embedded style-sheet to update the transforms was especially dis-heartening. There doesn't seem to be a way around it except to wait for version 67 when chromium.org says the fix should come out. That is months away for the typical Android-user.
This problem is not relegated to scripted animations either. I've seen similar issues reported with CSS animations and transitions as well.
I've gone to the extent of trying a number of my animation engines from the past, all of which work beautifully on version 61 down to when RAF was available. I've even written new, simple test engines, just for this. I've tried a number of other developers engines. Still crashes.
At this point, I think the only thing that can be done is to wait for the fix, and possibly get enough attention from enough people to hope they will up the priority.
They said in the ticket it's a problem with a code-optimization. I would really like to see them revert that portion back in version 65 before it hits the stable channel, so the average user will not see this problem soon. There's still time to generate another build and get it out before then.
Anyone who would like to see this happen, please go to the link below and put your two cents in on the ticket at chromium.org.
PREVIOUS UPDATE: This issue has now been tested and confirmed at chromium.org as a bug in the GPU rasterization code, affecting up to version 66 of Chrome for Android, and appearing after build 62.0.3197.0 (the last build unaffected). Their engineers are now working to fix it.
I am leaving this open for anyone who has run into this issue, so they don't think it's a problem with their code, and in case anyone happens to read it that can either contribute to the fix or offer a reasonable workaround until a patched build is released. If anyone does find a workaround, please provide it as an answer here.
For those interested, the link to the ticket is below. Here is an excerpt from the bug report:
Tested the issue in Android and able to reproduce the issue.
Steps Followed:
1. Launched the Chrome Browser.
2. Navigate to the URL: https://keithclark.co.uk/labs/css-fps/
3. Tap on any of the tab and try to access the game
4. Observed that Chrome gets hanged.
Chrome versions tested:
64.0.3282.116 Stable/Beta, 65.0.3325.16 (dev) 66.0.3328.0(Canary)
OS: Android 8.1.0
Android Devices: Pixel
Using the per-revision bisect providing the bisect results, Good Build
- 62.0.3197.0 (497604) Bad Build - 62.0.3198.0 (497674)
You are looking for a change made after 497614(GOOD), but before
497615(BAD).
Previously:
Not quite sure if this is a Javascript, CSS, or Android problem-- but here goes...
Basic Question: What do I need to do to keep my pages with scripted RAF 3D transforms from locking up Chrome vs. 62 and above on Android? Is anyone else having this problem?
**Note: This problem may actually be a Chromium issue. I have opened a bug report with Chromium Project. Those interested can view the ticket here: https://bugs.chromium.org/p/chromium/issues/detail?id=805525
I am leaving this open for now so they can view the full description, and in case it turns out I can fix my own pages with a change to my code. But please, read on... ;)
Background:
My pages work great on 61 and below. I manually updated Chrome on my Samsung Note 3 to version 63 stable recently, and found every page (not just mine) with complex, nested 3D transforms running on a requestAnimationFrame loop would lock up the browser. A perfect example is a page from Keith Clark, who has a CSS/HTML/Javascript proof-of-concept demo of a First-Person Shooter. Now, the mobile version worked great on my phone before. After the update, it locks up. My pages work really good, even on weak devices, till this update.
I've narrowed it down a bit. If I clear cache, and uninstall updates, the stock Chrome (41) runs these things great. Install updates to 63, 62, 64(beta), same problem. I can't remember if I tested 60 or 61, but update to version 59 and we're still golden. Firefox is fine. Opera is well, Opera. Same updates on desktop run great.
What I'm not totally sure of is if it's a problem with my phone. No other problems, ever. I know it's a little old, but it still blows most mobile devices off the shelf. Android version 5, Lollipop. Rooted. If any of that matters. Malware scans have always produced 0 with any AV/M app I've tried. I'm very careful.
Anyway, if anyone else has had this problem, or knows of it...
What do I need to change in my code to make it compatible with current Chrome on Android? Is this a problem I need to solve with code? I've looked everywhere but can't seem to find info specifically on it. All I can say is it's breaking my animations. I can't even use dev tools to figure it out, as running a perf check from my computer crashes my phone so bad Chrome dies and loses the connection and any performance data gained, taking my phones wallpaper along with it!
I'm not picking up any errors from my script-- it's fairly basic. I stripped it down to bare bones because I thought I had a runtime error, but nothing. Is there a change with the way Chrome for Android interprets the CSS or does the layering or something?
Sincere apologies if this ends up being off-topic, as I'm not totally sure if this a coding issue, or just a problem with my phone in particular. If it's a coding issue, that's what I need to know-- and how to fix it.
My problem may seem a bit vague (it is to me too), but here is my attempted explanation of it.
A few months ago, I implemented PDF.js in my web application. It was really useful, and I am using it for interactions with my clients.
Suddenly, last week, my clients reported to me "Aw, Snap" messages in Google Chrome on their PCs when they try to launch PDF.js. I have an iMac and two PCs at home, so I decided to test this out.
When I used Google Chrome on my iMac to launch PDF.js, I found it worked fine.
When I used Google Chrome on my first PC to launch PDF.js, I found it worked fine.
When I used Google Chrome on my second PC to launch PDF.js, even though it previously worked, it kept crashing and showing me "Aw, Snap" messages.
This was weird. I tried removing all the extensions, clearing the cache, clearing the LocalStorage, but nothing seemed to fix the problem.
I then realised, after some communication with my clients, launching PDF.js in Safari, Torch, Opera or Firefox on any operating system worked perfectly fine.
Why would this happen? I am using the web viewer in PDF.js. I also tried with the basic hello world example, but that broke as well (which I now find really weird), so I suspect there's something wrong with the rendering engine.
I also tried including the compatibility.js file after building the source, but with no avail.
Is there any known bug which causes Google Chrome tabs to crash?
Yes, I got it now.
From https://github.com/mozilla/pdf.js/issues/4104, I found the answer (thanks Rob and PDF.js dev team!). Take a look yourself!
I'm only posting this here so that anyone who stumbles upon this post with a similar problem can be helped (as this error took me quite a while to figure out).
Unfortunately, this does not seem to be the case. We've tried the latest version of pdf.js from github, also tried Chrome 33 (stable) which should have their V8 fix included and it still crashes. Also, tried the pdf.js commit mentioned in github thread (4ce6cb8 - https://github.com/mozilla/pdf.js/commit/4ce6cb8b0fa9db948516b2b738fa1503cf0ef90e) - still crashes. Also tried latest Chrome Canary available on 19/03/2014 - crash is there.
We can provide the WinDbg memory dump if it's of any help.
PS: sorry, this should be the answer to Rob W thread right above but I cannot add it there due to 0 reputation.
http://bit.ly/Z7YPj7
It works fine on the desktop everywhere, and also on Android. But on the iPhone Simulator, the culprit appears to be in the file: js/the-anim36.js (which queues a whole bunch of Raphael SVG animations).
I'm monkeying around with Safari 6's "Develop" menu, which can now log info from the XCodes's iOS Simulator, which i downloaded and fired up. But I'm getting absolutely nothing in the javascript console, and a hard crash in the simulator each and every time I open the html file. I have to "Reset Content and Settings" each time I try to open the file. I'm frankly lost here, admittedly a novice at debugging in general (and also probably spoiled by Chrome.) Any pointers on what's possibly going on here would be very appreciated.
You can run out of memory really fast on iOS. Run it through the Chrome profiler and see what you're memory usage looks like. I bet it's using > 10mb of ram. In which case you're probably toast!
Check out this informative article, that claims after about 6mb of ram, you will crash mobile safari:
http://cubiq.org/testing-memory-usage-on-mobile-safari
I observe that when I open that page my laptop fan run on high. The thing is consuming a lot of CPU (and likely a lot of RAM) and may simply be exceeding the allowable resource limits on iOS. If not running out of RAM it could be causing the foreground process to run too long, triggering the logic that cancels "looping" apps.
I seem to be having a issue using phoneGap with querystrings
I wanted to have a page as:
view.html?matchid=1234
I have also tried:
view.html#1234
Both of these work in the emulator (running 2.3) but neither work when on my phone (ICS 4.0) - It errors as if the page doesn't exists...
I believe it may be a issue with the version of android. Does anyone know of a fix/work around I could possibly do.
Ideally it would be still using the query in some way. If not the other option I thought of was to use localStorage. Save something to it before going to a generic view.html page which then takes the Id out of localStorage....
There is an issue for this in the Android issue tracker.
http://code.google.com/p/android/issues/detail?id=17535
It affects all versions of Honeycomb and ICS.
It has been fixed and marked for Future release, so don't expect it anytime soon.
You can find some workarounds on the issue thread.