we develop and android app that opens a full screen browser and loads some content. this all works fine excepted this little bug:
only under 4.4.2 (works fine on 10 devices with 4.2, and also tested on 4.4/5) only the text-shadow css feature drops the shadow on the top of the text box instead of behind the text. it fails in our app, also fails in the default browser, but works fine in Chrome or firefox on the same android stick.
as you can see it from the attached screenshot the box shadow works fine.
also this issue is related to kernel 3.0.36+ and works fine on (Nexus7 4.4.2 with) 3.4.
so as we think this will be an issue with the webkit engine, and looking for some solution/workaround
Related
I'm working on a Cordova mobile app that uses jQuery Mobile. On this app, we've created buttons using icons from the Font Awesome library. In Chrome, everything works great -- the icons appear as they should. However, if we compile the app and run it on our Android test devices then the icons will start to randomly replace other icons on the same page.
If we use Chrome DevTools to inspect the page while the mobile app is running on the phone, the icons display correctly on the desktop inspector, but not on the mobile device.
Here's a screenshot of the icons displaying correctly. This is from Chrome DevTools inspecting the mobile app while it's running live on the mobile device.
Here's a capture of the same screen taken from the device. I've indicated in red where the differences in icons are.
More pertinent observations and facts:
Our primary test devices are Samsung S7s running Android 7.0 -- all of these devices have this same problem.
The icons do not start to replace one another until we've changed pages a couple times.
It's not consistent which icons get replaced. It will vary each time we fire up the app. One icon that gets replaced one time might be left untouched the next time.
This problem does not occur on our older Android test device (Droid Razr Maxx HD running Android 4.4.2).
I've tried re-compiling the app with the android-targetSdkVersion removed, set to 22 and set to 25. In all instances, the icons continue to swap randomly on the newer Androids.
We've upgraded cordova-android to the latest version (6.2.3 as of writing) and the issue remains.
If I use Chrome DevTools to manually remove the Font Awesome icon CSS class (e.g., fa-user-plus) and then re-add it again, the icon will then display correctly on the device.
We've noticed that sometimes (as you can see in the screenshot below) a small white line might appear underneath an icon that has been replaced.
Does anyone know what might be causing this? Any theories on how it's possible for Chrome DevTools to show one thing while the device shows another would also be helpful.
I stumbled across a solution for this problem while debugging a separate issue on the same app where position:relative elements would disappear while I was scrolling on a mobile device.
While I haven't been testing on an iPad, the solution provided in this question iPad Safari scrolling causes HTML elements to disappear and reappear with a delay fixed both issues.
What I did was apply -webkit-transform: translate3d(0,0,0) to the class .ui-btn (the jQuery Mobile class for buttons). After a re-compile, the icons would no longer randomly swap with one another.
I have little insight as to why -webkit-transform: translate3d(0,0,0) fixes this apparent WebView rendering bug. If anyone has a deeper understanding of what's going on, please leave a comment!
I'm using dojo performTransition to switch between views and it is working fine all the devices except Samsung devices with Os version higher than 4.1.x
Transition is working but all the previous and next view are visible and I'm able to see all the screens that I navigate from on the screen by swapping the screen
Please look at the following dojo defect:
Transition issue on some Android 4.1.x devices:
https://bugs.dojotoolkit.org/ticket/17164
As well as this previous post that may help you based on Ken's and Idan's suggestions:
IBM Worklight 6.0 - Dojo application doesn't work on Samsung Galaxy S3
manually hiding and showing screens using css display 'block' and 'none' after transition is finished worked for me.
Here's the site that I'm working on:
http://www.montevista.dreamhosters.com/
You'll need Opera Mobile Emulator or an Android device (not all of them show this problem). The Samsung Galaxy III shows it as well I think.
Here's an un-minified version of the stylesheet:
http://www.montevista.dreamhosters.com/wp-content/themes/Monte-Vista/style-unminified.css
I'm pretty sure that this isn't a problem with the responsive-nav.js, but something to do with my own code. I'm using Skeleton grid.
Is there any testing tool that would allow me to view source on this? I've tried connecting Opera dragonfly but it ends up showing me what is being displayed in the browsers instead of what's in the emulator.
Me again, replying to my own question. I fixed it by switching to Slick Nav (http://slicknav.com/) instead of Responsive Nav.
I'm developing a phonegap application for both iOs and Android platform.
I'm using AppFramework by Intel (ex. jqMobi) and it works like a charm in iOs, it works good also on android, the only thing is that the scrolling is not working in Android 2.3.6 and I can't figure out why. I don't know if it works in most recent version of Android on real device, it's not working there too in the emulator.
Thanks in advance for any suggestion...
On Android 2.3.5 & 2.3.6, JQM's header and footer scroll with document and then reposition (back to top and bottom) after scrolling has stopped. This happens when header and footer are set to data-position="fixed".
It appears that these versions of android have buggy CSS implementations of {position:fixed;} and therefore JQM's behavior appears erratic when compared to other adjacent Android versions.
Visit a webpage that uses a navbar that's fixed to the top using an Android device.
Example 1: The Next Web
Example 2: A test page I built (You'll have to scroll down a little bit to get fixed navbars)
Is it only me, or does anyone else see the navbar "jitter" when you scroll the page? Is there anything you can do to fix it? I see the issue on my Samsung Galaxy S3 running Jelly Bean with Chrome, Dolphin Browser HD, and the stock browser. For some reason, I cannot replicate the issue with my Asus Transformer TF101 tablet.