I have been working to debug an issue with an ecommerce site I am building. I currently have keyframes executing with the class fadeRight. The fadeRight class executes a sliding in effect from the right on page load. I have this class only applied to a few elements and it works perfectly.
My issue is when I load the homepage only on a mobile phone, the navbar logo and shopping cart like in just like the elements below it with the fadeRight class.
I have tested it out on a few androids and ios devices and the effect is clear. I cannot replicate this on my PC running IE and Chrome as well as my Mac running Safari and Chrome. I do not know what an accurate debugging solution would be that would be causing this issue. I have set my chrome options to mobile size under dev tools thinking it would react like my phone, but nope.
The site I am working on is here: store
Can somebody tell me why when I open this website template with Chrome from Android I cannot see the background?
https://html5up.net/uploads/demos/highlights/
If I open the same link with Firefox for Android, the background shows up with no problems (everything is also fine with all browsers from the PC). I tried changing the CSS in a zillion ways, but I still got the issue. Any idea to fix it?
I made my photography website as cross platform as I could without making separate web pages. This is my webpage.
It validates ok in w3c, and works perfectly in Chrome and Firefox for Linux, and in Chrome, Dolphin and the default browser for Android. However, it goes crazy in Firefox for android phones: it zooms in a lot with no reason, and the formatting is totally wrong.
Of course this is a bug in Firefox since it is not consistent between platforms, but which is the culprit? How can this be avoided? I guess there's something that can be done in the big IMG at the beginning of the page to prevent this.
EDIT: Firefox for tablets works fine too.
I'm working with a special image format and was creating something to dynamically generate it. I went to try it in mobile Chrome (it isn't displayable in the browser but it could be downloaded) and suddenly it opened about fifty new tabs! I fought with my browser to close them all but it just kept creating more.
http://www.sudomemo.net/images/dynamic/profile/540417_0BC7C6632064B_047.ntft
There are no redirects, no scripts. It's an image.
Any clue as to why this is happening? Have I discovered a Chrome bug?
Google Chrome 39.0.2171.93 (Official Build)
Revision bec62c44cbc7da9f6a507873382ebc111d66e9d7-refs/branch-heads/2171#{#449}
OS Android 4.4.2; XT1031 Build/KXB20.9-1.10-2.27
Steps to reproduce: Tested on Android Kit Kat, with the only installed browser being Google Chrome.
Open Chrome and go to the above link.
I figured it out a while ago.
To make it short, mobile Chrome didn't know how to handle the file, as it had a text/HTML content type but wasn't parsable as text or HTML. It got passed to the Android Content Provider, (that bit which gives you options between which apps you can use to open something), which immediately returned it to Chrome, as it's the only browser on my phone, opening it in a new tab. This looped over and over, quickly causing my phone to slow down and crash.
I've experienced a LOT of strange behaviours with using WebView in Android and I'm wondering why there are so many diffrences between the WebView and the Browserinstalled on each phone?
As an example, I've developed some applications that had to display HTML content, which contained either jquery-mobile, flash,javascript, YouTube embedded and so on. So I had a lot of problems with displaying this pages inside WebViews. Either they wouldn't get displayed at all, just blank, either the videos won't play and so on. And the strange thing is that they work properly if opened in the Browser installed on the phone. I had JavaScript enabled, I tried diffrent WebSettings, I had set the WebChromeClient and WebViewClient looking for javascript errors... but nothing worked.
So I got to the conclusion that the WebView component is completely different from the Browser application installed on the phones. I'm thinking that every manufacturer makes their own Browser to support as many as possible pages, and the WebView remains the standard one, included in the Android SDK.
Am I right? Or there is another reasons/explanation for this?
Thanks.
EDIT: Everything that #ondoteam has suggested was enabled and set at the time being. I no longer have the references to that websites, which anyway were internal.
This article outlines your speculation about stock browser differences between manufacturers, that absolutely is true: 5 reality checks every team needs before working on Android webkit
...which does cause trouble and mysterious/difficult to diagnose/solve problems.
As far as your issues with your WebView implementation:
Version of jquery-mobile may be an issue jquery-mobile loaded into an android WebView if you are using jquery.mobile-1.0.1.min.js you may want to try the uncompressed jquery.mobile-1.0.1.js
And Flash :-/ Good luck:
Screen blinking when using a webview with flash
Flash in WebView not working on Android 3.2
Flash video not displaying in WebView for Android 3.0.1
For loading SWF:
Load an SWF into a WebView
loading flash files (.swf) webview in android
Good luck with that, seems like a lot of variables with devices, Android versions, etc. And will take persistence with trial/error.
The stock browser and WebView differs .Using all the tweaks like
WebView browser;
browser.clearFormData();
browser.clearHistory();
browser.clearCache(true);
browser.getSettings().setAppCacheEnabled(true);
browser.getSettings().setDatabaseEnabled(true);
browser.getSettings().setDomStorageEnabled(true);
browser.setWebChromeClient(new WebChromeClient());
still it does not load high resolution images properly which is being loaded perfectly well by the android browser.
Only part of the image can be visible on the webview screen which appears fully on normal android browser.
This behavior is observed with latest Android 4X SDK as well.
Which means android default browser significantly tweaks the webkit/webview code to show any url
WebView by default is restricted. You should call setWebChromeClient and family to have a decent browsing experience. In addition, don't forget setJavaScriptEnabled() and other similar stuff. Sorry for my brevity... I think that you don't need examples.
http://developer.android.com/reference/android/webkit/WebView.html
have you checked this question : jquery-mobile loaded into an android WebView
it might be that you're using the wrong libraries. Just check in any case.