Develop Reference

CSS Scroll Snap causing duplicate div temporarily on android

OK, so on all devices this site is behaving as it should. However on nearly all android devices, including Browserstack I'm having an issue when you scroll past "Treatment Options" the content gets quite 'shonky'. Is anyone aware of a bug or something I'm doing completely stupid? dev site: http://eqp.isitmeanttodothat.io
TIA

Sencha touch lib not working on Chrome 43

I have built hybrid app with Sencha touch 2.3 and till recent it was working fine but i recently updated the Android System Webview via Play Store (i have moto g running android 5.0.1) and now i am encountering various bugs in UI as follows :
The selectfield picker does not work correctly now. It behaves randomly. The store bound to it has data but no items are displayed in the picker when it opens. At times items do get displayed but you cannot select the items at bottom because picker always resets the selection to the item at top.
Few screens show up blank initially when rendered for the first time. As soon as user touches the screen and moves a little bit the whole screen/view becomes visible.
Also there might be other things that might have broken after updating the webview which i might not have discovered but this a big issue as far as developing for android is concerned with sencha touch. The webview updates are now pushed Over the Air and hence many things may break in future.
I also confirmed the above bugs in older versions of android wherein the webview has not been updated and the above bugs do not show up in.
I am thinking of using crosswalk as the solution to the issues with the webview. Anyone with the same issues or any tips regarding a fix ?

I ran into a similar issue with my Sencha Touch app (almost nothing rendered). Here is the workaround I used which seems to work great:
http://trevorbrindle.com/chrome-43-broke-sencha/

Thanks #Ian. The link was tremendously helpful and it solved the issue for now. Sencha has not officially released a build with these fixes so the overrides are the only solution right now.
For anyone facing same issues here is one more link from the Sencha Forums where all the issues sencha frameworks are facing with Chrome 43 are stated and solved.
https://www.sencha.com/forum/announcement.php?f=92&a=58

I am also stuck with same issue and i found solution we should not update the chrome. Better download 42.0.2311.152_chrome64_installer which is offline exe for chrome.

How to remove tap highlight color in Android 4.4.2/chrome

I've read many posts and answers with regard to the question above, but as yet, I haven't come up with an answer that works.
This is my current code:
* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline:none;
}
I've also used 'transparent' in place of rgba.
As I pointed out - I'm using Android 4.4.2 on a HTC one, now using Chrome 42.
Nothing I have done has resulted in removing the green overlay. I came across a bug report that implied that the webkit engine is no longer used on this Andriod/Chrome version (probably true as it was on the official site), but if that is the case, how do I remove it?
I can't believe I'm the only one with this issue.

This CSS tweak worked perfectly for me using a Galaxy Tab S running 5.0.2. and Moto G phone running 5.1. You might have a conflict in your CSS. Hopefully by you got it worked out.
Thanks for the post John!

PhoneGap - Bad Performance compared to Browser on Android

I developed an application for android using jquery mobile and phonegap.
I deployed the app to my device over usb. The performance of the app ist really bad, especially while scrolling a longer list.
The strange thing is: The whole app runs smooth if i just open up the browser on my phone and access the index.html directly. Same technology, same content. I do not use the phonegap native api or anything similar.
Tested with phonegap 1.5.0 and 1.7.0rc1, jquery mobile 1.1.0 on android 4.0.2.
Any ideas?

On honeycomb (3.0), Ice cream (4.0) and posterior devices, you can boost performance by adding the following in the < Application ... > tag:
android:hardwareAccelerated="true"
You could set the minSdk to 8 (Android 2.2) for compatibility and the targetSdk to 15 (Android 4.0) and that would make hardware acceleration work when its available on the device only.
I believe that with this flag the performance of my apps is equal to running them in the browser, so I guess its because the browser was coded with hardware acceleration :)

I had a similar problem: a page with a longer list of "medium complex" themed divs. The browser of HTC phone had no problems in displaying. But within the phonegap app rendering failed completely. I saw a kind of WSOD, which disappeared only after touching the display. After touching, the page was displayed correct.
The problem was not in place, when I shortened the div-list to one or two div-elements or when I reduced the sub elements within the divs and reduced the render effort caused by the css complexity.
The white screen looked like, if the whole body was invisible, since only the documents background-color was displayed (I added a light pink for this). So I guess, the rendering was the problem after reading this thread
I tried the various proposals I found in this thread to make the app work without the "WSOD". But nothing worked. Some of them made the app displaying really worse.
Finally, after a whole day of searching, I made it. I set within the tag (not the tag) of my AndroidManifest
<application android:hardwareAccelerated="false" ...
Now the app behaves in the same fast way as my webbrowser. Seems like, if hardware acceleration is not always the best feature...
My versions:
phonegap 3.5.0, Android 4.0.3, jQuery v2.1.0, HTC Sense 3.6

Found an answer here: http://groups.google.com/group/phonegap/browse_thread/thread/94da1cf881abe995/6d4f7aea7aeba523?lnk=gst&q=performance
There is probably a difference between the native browser and the webview in terms of javascript performance.

If you can confirm the browser performs better (that it's not something suboptimal in your code frustrating one but not the other), you could consider deploying as an html5 offline application so that you will actually run in the browser.

We bumped into performance issues while scrolling the same amount of list items with jquery mobile. The performance was so poor (we didn't even try in PhoneGap environment) that we rewrote the app using iScroll library... now the app scrolls really smoothly.
If you are at the beginning of the development, you could try to change the UI library.
After this situation we deploy our apps to test devices quite often to manage performance issues in time... this became a "policy" :)

Android - html from android_assets in WebView, CSS not loading in ICS

I've been writing a small app that basically loads its content from locally stored HTML and CSS into a WebView. I initially started this when I had a device running Android 2.3 and had no issues. I recently got a Galaxy Nexus but the CSS doesn't appear to load in ICS.
I read something that suggested enabling hardware acceleration would help but it does nothing. I'm now at a complete loss. Javascript seems to load fine so, combined with it working well on 2.3, suggests it's not the way I'm loading the CSS.
Has anybody seen anything similar? The app is unusable without some touch-friendly CSS.
Thanks in advance.
Edit: Ideally, I need this to work on all versions of android from 2.2+. Not sure if it makes a difference but I thought it might be relevant.

Found the issue! It turns out that there is a rather big bug in the browser for ICS and presumably Honeycomb based on a test. In the logcat I get the following error: Unknown chromium error: -6. Removing the querystring solves the issue (although screws up my functionality). There is a bug report for it here if anyone else is having the same issues.