Different behaviour of JS Popups in Chrome Browser and Webchrome client in Android

Question

I am trying to just hook a webview to display a certain web page.The website seems to have changed its UI to include a lot of transitions and animations. These animations while working on a laptop weren't working on Chrome yesterday. Until we updated Chrome to Version 18.0.1025308 . Now they work on Android chrome i.e. we can see the modal pop up JS screens. But the webview's don't. A blank blue screen comes on top of the screen and stops responding.

This was also the behaviour on the browser also until we updated it to the latest chrome version. I think this is a significant point here. I don't see any changes made to the WebChromeClient API.

The window in chrome browser as shown below. React JS is being used.

In Webview

So instead of the popup a blue screen comes over the screen and nothing can be done to it

Additional details

1. Hardware acceleration already is enabled. We tried toggling this to see if it made any difference but it doesn't.
2. We are using a WebChromeClient so that JS is enabled. All the other parts of the site are working as intended.

Any ideas on where to look for the problem would be appreciated.

We just use webchromeclient and don't do anything fancy. All webview plugins are enabled.

Answer 1

Your problem is probably that the website is trying to use new JavaScript APIs which are not available or are broken in the (outdated) WebView. (The WebView does not get updates, so if your phone has android 4.0, which was released in late 2011, you will be using a 3 year old rendering / JavaScript engine)

Animation on a webpage is done with new javaScript and css features, which the webview may not have. If an older version of chrome does not support these, the WebView won't either.

You could try Crosswalk, which is a WebView replacement which uses the same rendering engine and has the same javaScript support as Chrome. Also see this answer for an alternative to Crosswalk, which is possibly easier to use.