Im having issues with the Soundcloud embed widget on Android 2.3 devices (Galaxy S1 for example)
Here is my example: http://jsbin.com/kedikile/1/
Firstly 90% of the time i get 'Oops we couln't find that track' secondly when it does appear, the widget floats at the top of the screen, it should be beneath the text
Related
When checking the homepage for https://www.warehouseappliance.com/ on my iPhone, the categories are overlapping the content above it. Yet on Android the categories are pushed down in the correct position.
This issue doesn't show using emulators, only shows when viewing on an iOS device.
Changing margins and paddings, nothing seems to effect iOS.
I'm unsure what code is causing the issue, site is https://www.warehouseappliance.com/
I expect the category section to not overlap the content on iOS. It should match Android, and the emulators.
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!
We have a hybrid app built with phonegap and jquery mobile.
In one screen we have standard HTML5 select (drop-down list)
On one android device, Samsung S6 Galaxy with Android System WebView M42, the drop-down is shown with black text on grey background. See screenshot.
On all other Android devices it is shown with white text on grey background.
Are there any way of fixing this from the hybrid app?
This is not ideal fix, but i fixed it by switching to older android theme. In your manifest file
android:theme="#style/android:Theme.Holo.Light"
Have you reduced this to the simplest of examples? Just use the default app template, add in jquery mobile and create a list and show it to make sure it really is a problem specific to that device / environment.
The reason I ask is that I ran into similar issues until I ran my app's html and css through the WC3 validators. Turns out there were a couple misplaced tags here and there that caused issues only in some environments.
I have created a fairly simple responsive website and have optimized it for mobile use using the meta tags. It works very well on desktops and on iOS phones and even the Galaxy S5. However, based on some tests using a browser compatibility program, the design falls apart on Android devices using 4.2 or lower (including the Samsung Galaxy S2 through 4, Kindle Fire 2, and Google Nexus). The images (doesn't seem to matter what type of file) will either become very vertically stretched or disappear altogether, no matter the file type. I have tried many things and can find no apparent difference between the images that are displaying and those that are not. Also, my header and footer are no longer where they are supposed to be. From what I can tell, the problem is that Android is not interpreting my css in the same way as ios does.
I have been able to fix the problem somewhat by dictating pixel dimensions for all of the photos instead of percentages, although this messes with the responsiveness of the site. This also fixes my header/footer problem although there is a very large space on the top and bottom of the mobile drop down menu and my logo in the footer (.svg) is distorted despite giving it dimensions.
I can't seem to find any information about this problem so I feel like it has to be an easy fix that I am overlooking.
The website is www.2015housingconf.com.
Thanks in advance!
I was checking this blog http://mathiasbynens.be/notes/touch-icons and it worked fine for iPhone , but for Android I get a weird Icon on home screen.
Snapshot of Page I was viewing and in the bottom left a tiny touch icon that I added in headers.
Why is this so Is it possible to get it like a touch icon in my android device(2.2) as well ?
This favicon compatibility test indicates the following regarding Android:
Samsung Galaxy S (Android 2.3.3): the default browser takes the 16x16 PNG icon (so not the Apple Touch icon) and adds some decoration around it. Although correct, this is not the expected behavior.
HTC Desire (Android 2.2.2): the default browser takes the 57x57 Apple Touch icon, which is correct.
Nexus 7 (Android 4.4):
Chrome takes the 152x152 Apple Touch icon, which is correct.
Firefox takes the 196x196 PNG picture, which is a bit surprising but correct, too.
In the end, you might observe some unexpected behaviors on old Android devices.
In order to maximize compatibility and avoid playing with Photoshop&friends, HTML code and devices, you can try this favicon generator. Some extensive testing has been performed already. Full disclosure: I am the author of this site.