JS Pan Gestures on Android Webview doesn't work - javascript

pan gesture / scrolling on a web view is not working on a WebView hosting jquery datatables table until a click on a table header is done.
Meaning, the user cannot scroll the table up and down and sideways, until he presses a table header (which sorts the table). This also happens on non-jquery-tables JS code – the WebView is not scrollable. Interesting thing to note, that when I attach a chrome debugger to the WebView, scrolling starts to work.
I’ve tested the same code on Android chrome browser with local and remote JS code – and scrolling works. So this leads me to think that there’s some kind of issue with the WebView itself.
I thought it might be a swipe gesture collision - but there is no swipe gesture defined (meaning the web view is standalone in the activity and there are no windows to swipe to).
Any ideas?

You should post your code, Android WebView has many options, I'll start testing:
webView.getSettings().setBuiltInZoomControls(true);
Also check that javascript is enable.
Hope this helps

Found out the issue.
Probably there's a bug on WebViews on KitKat (and smaller) versions on Android. On Lollipop things work fine.
My workaround for KitKat was to redraw the DOM:
setTimeout(function() {
var htmlString = $( '#content' ).html();
$('#content').html(htmlString);
}, 1000);
That somehow returned "focus" to the DOM and panning gesture works.

Related

Mobile Android Chrome not working great with HTML5 and CREATEJS - freezing issues

I have developed an app using HTML5 and CREATEJS. I am encountering some issues that I cannot find a solution, for weeks. I hope someone can help.
1)On Android Google Chrome there is a problem that appears when I simply click anywhere on the screen: the FPS drops and any animation that is playing freezes for the duration of my touch. The problem is only in Mobile Chrome browser, on Android. It does not exist in other mobile browsers, neither in iPhone, neither in Safari, Firefox, etc.
I created a simple apk using webview and it doesn't have the problem either. So for some reason, the problem is only in mobile android chrome.
The code is optimized at maximum. 2 months ago we used only 1 canvas, but now we use multiple canvases and we have less animations in each canvas running everytime. While in android firefox it works perfect, but in android chrome it freezes for a single click.
I tried to disable stagemousedown/up events, because they are being triggered when I simply click anywhere in the stage. This didn't fix the problem or it is possible that there are some hidden stagetouch events that I don't know how to disable.
2)On Android Google Chrome and iPhone6 Safari, when I click the SPIN button, the game starts the SPIN, but with a delay of at least 1.5 seconds, but there is no such delay added with intention inside the code. On PC any browser, Android/iOS Mobile Firefox, this works perfect, no delay. In iOS Safari iPhone8 again it works perfect.
I created a simple apk using webview and it doesn't have this problem either. So for some reason, the problem is only in mobile android chrome.
UPDATE 11/10/19: Issue 2 has been solved by reducing canvas size and removing all shadow effects which consumed a lot of memory. Issue 1 still remains unsolved with absolutely no ideas left to try out. Any help is appreciated.
My project is 99% completed except these 2 issues. I am hoping to be able to fix them, because I really do not want to throw away months of work and switch to other javascript library for gaming, that doesn't have the problem, like PIXIJS.
I tried with RAF and RAF_SYNCHED, but still no improvement in any scenario.
Stage.update() is required for any animation. Having them on ticker is the reason why its getting slower.
To see the problem in action, please open this URL: http://www.nevergone.biz/DEMO_CODE/index.html
How to test: Open the link above in Android Google Chrome portrait mode and then click SPIN. During SPIN click above the game canvas or anywhere. Notice that everything freezes.
The code was extracted only for testing these issues, so after a few spins it may freeze. I will fix this tomorrow, but I hope someone can give some ideas for solving the problem.
Problem #1 is apparently isolated on some older devices that use Android Google Chrome. The problem is somehow caused by CREATEJS using too many listeners on the stagedown event. I am currently waiting for the developer of the framework to give an answer or for Chrome to receive a serious update.
Problem #2 was fixed by removing all text-shadow CSS effects which apparently were consuming a lot of memory.
cache might work.
var testShape=new createjs.Shape();
testShape.graphics.beginFill("red").rect(0,0,100,100);
testShape.cache(0,0,100,100);
stage.addChild(testShape);
// If you make changes and want to refresh the cache
testShape.updateCache()

Fullscreen API without mouseclick or keydown event

For a friend I'm creating a narrowcasting (well, not really, just to one screen) page which reads content from his webshop and shows a slideshow with highlighted items, together with his logo and the time.
To run this I'm using an Android 4.1 device with a screen, I've installed Chrome onto the device which works properly. Everything is going pretty good so far, there's just one thing that annoys me. As we speak I'm using the Fullscreen API to go fullscreen as soon as the user presses the enter key. But due to changing content I want to do a refresh once in a while to fetch new content.
Here's where the problem lies: once the page refreshes it leaves fullscreen mode. I have been looking for settings in Chrome Android to allow fullscreen mode without a mouseclick or keydown event but haven't succeeded so far. Is there any way I can get the result I want (going fullscreen without a click of keydown)?
The reason I'm using Chrome Android is because this browser gave the best HTML5 support (for future use) and the best resolution (1280x720). But it's lacking a fullscreen mode I can use from within the browser. I tried Firefox for Android with a fullscreen plugin, that worked perfectly (not leaving fullscreen when refreshing), but Firefox only gave me a 960x520 viewport which is pretty small.
There's just one thing that comes up in my mind for now, which is doing an AJAX request to fetch the new content and replace the pages HTML with the fetched HTML (or perhaps just the 'slides' container).
Thanks for thinking along!
This code will do the same thing as refreshing the page automatically. I'm not sure if it'll prevent you from exiting fullscreen because I don't have a working copy to mess around with.
$.ajax() //Get the current page
.done(function(msg) {
document.documentElement.innerHTML = msg;
});
I don't recommend doing somthing like this, however. Your best bet is to abstract the part of the page that needs to be updated to it's own page, ie:
$.ajax("http://example.com/get_next_element")
.done(function(msg) {
$("selector_for_fullscreen_element").html(msg);
});

HTML Button in iFrame does not work properly on iPad

I have a web application in which I have a div element with an onclick javascript action. This web application works fine on iPads and desktops alike.
When it is launched within an iFrame on an iPad, however, all of the sudden, my clicks/taps are rarely and inconsistently acted upon. When running in an iFrame on a desktop browser, I do not see this behavior.
Has anyone seen this type of behavior before?
I'm not sure about your exact situation, but I was having a similar problem when my botton had a "mouseenter" event trigger binded to it. The mouse enter would be called on the first "tap" and the button would be called on the "second". Because of the way ipad uses those two events.
My solution was to use the browser detection tool from http://detectmobilebrowsers.com/ and set a var ismolible = to true or false, depending on whether the browser was mobile or not, then I used an if statement to unbind my mouseenter immediately if the browser was mobile. You do have to modify the http://detectmobilebrowsers.com/ code for ipad.
Hope this helps!

iOS Javascript DOM "Freezing?"

A few questions here:
Is there anyway to keep iOS from freezing javascript on the page while scrolling?
Does iOS freeze javascript when your in another tab or if you switch apps?
Are there any other major javascript limitations on iOS?
iOS 6.x suspends all event timers in response to touch events like scrolling and has a tendency not to start up all the timers again once the event is done. It's a well known iOS 6 bug that is super-annoying. It pretty much breaks parallax and stuff. Some people have resorted to building their own scroll functionality.
Here's another StackOverflow on the same topic:
iOS 6 safari, setInterval doesn't get fired
and another:
setInterval pauses in iphone/ipad (mobile Safari) during scrolling
and here is the closest thing you'll get to a bug report on it (Apple doesn't make bug reports public to maintain the illusion of perfection, so developers made their own bug site): http://openradar.appspot.com/12756410
This bit of code will unfreeze timers that are broken / lost / destroyed by iOS during a page scroll: https://gist.github.com/ronkorving/3755461
This is another attempt to fix the freeze: iOS 6 js events function not called if has setTimeout in it
Unfortunately, there is nothing you can do to fire events WHILE page scrolling. Like fade out a back-to-top link when scrolling up the page. When it comes to scrolling, iOS6 is incapable of rubbing it's tummy and patting it's head. (iOS5 works fine, btw. This is a regression)
To answer the third question, a decent-sized limitation is that sometimes innerHTML just plain doesn't work. From the accepted answer:
It happens when the CPU of the phone is very busy (say 100%). Then the rendering engine sometimes forget about innerHTML settings.
The solution included in my unify project is to test if there is an element in childNodes, otherwise apply it again.

debugging css ipad

I'm create a website specifically for the ipad. What tools should i use to help me debug CSS? I'm developing from a desktop environment, but testing and viewing my changes on the iPad.
I use firebug to debug your normal website. But my ipad website doesn't show up at all in firefox. It shows up in Safari, but Sencha's drag, touch and slide event handlers don't respond well to my mouse events.
What tool do I use to debug css (and possibly javascript) issues on an ipad website built with Sencha?
Try the Phantom Limb.
It simulates touch events on a desktop browser to enable testing. (it also turns your mouse pointer into a giant hand, which I guess adds to the effect.... hmmmm)
This is quite a new thing -- I haven't tried it myself yet; it's still on my 'todo' list, so I can't tell you how great it is, just that it is supposed to solve the kind of problems you're asking about.
I ended up using google chrome's developer tools. It uses the webkit engine just like safari, so it's the closes thing I have.

Categories