Incorrect webpage rendering in hybrid app - android

We have a hybrid app running on Android and IOS with several hundred users so far. Out of that number we have come across 2 phones that will not render the webpages of our site properly, a Vodafone Prime 6 and a Samsung Galaxy Ace 3. Here's a screenshot from the Prime.
The webpages use IFrames and SmartMenus, otherwise nothing unusual I don't think. Does anyone have any suggestions on how to fix this issue please?

Related

Background image rendering on Mobile

I created a simple HTML page that displays the problem.
With Chrome desktop version is okay but trying on different mobile device and with different browsers it becomes obvious that there is a bug.
Scrolling down, in my example with Samsung S6 and Chrome, appear a white band on the bottom of the screen that disappears after less than one second.
I believe this problem is generated from the header of Chrome (or browser you use) that disappears when you scroll down.
I created an example JSFiddle and loaded the HTML page on my server.
On the web I did not find answers to my question, I hope someone is able to help me.
Thank you all in advance.
Tests performed (and failed) with:
Samsung S6 and Chrome
Samsung S6 and Samsung Browser
IPhone 6S and Safari
LG G4 and Chrome
LG G4 and LG Browser

Responsive design not working on actual smart phones

We have programmed a site at: http://tcsdesignreno.com/zing-cards/ to be responsive. Whenever I check it in online responsive design test sites (such as: http://mattkersley.com/responsive/ or http://beta.screenqueri.es/) it looks fine but if I bring it up on my HTC Sensation, iPhone 5 or a Galaxy 3 it cuts off the right side of the screen. I have used the standard web browsers and chrome on the phones. I am not sure how to check the CSS on my phone to see what the problem is.
Does anyone have any suggestions on either how to fix the site or how to find the error from my phone?
You can debug Android's Chrome Browser from your computer; details at this link.

jsignature signature not displaying on Samsung Galaxy S4

Using jSignature (https://github.com/willowsystems/jSignature) within a PhoneGap, JQuery Mobile application.
When trying to sign in the content div using the Samsung Galaxy S4 the drawn line is not displaying. The signature is there when I pull the data but is for some reason not displaying. Any ideas why this might be? It has been working on other devices such as Samsung Galaxy S3, iPhone, and iPad.
<script>
var signatureContentDiv = $("#signatureContentDiv");
signatureContentDiv.html("");
signatureContentDiv.jSignature();
</script>
<div id="signatureContentDiv"></div>
I have also just run into this. For me, the error appears on the Galaxy Note 2.0 while running Chrome. I tried changing to Firefox and it works properly. The same behavior is noted when trying the demo directly on jSignatures site. I would suggest checking against their site and seeing if your device works properly to eliminate your code being the issue.
Hopefully this will get fixed.
Additional Info: I have just determined that it seems to be based on the dimensions of the image. Anything over 66,000 pixels (such as 600x110) will cause the failure. This still seems to only happen on certain devices, all running the same version of Chrome.
Interesting that I wind up responding to the last thread I answered about this issue almost 2 years ago.
It seems the most recent update to Chrome on Android (V 43.0.2357.78) causes new failures to jSignature. If the page is in it's native size (no browser zooming), it works properly. If you zoom the screen, it fails. This is new behavior (on existing code). Other browsers seem to work properly.

Images not loading on Galaxy S3

I am facing a weird issue, which is already driving me crazy, so ANY help is most welcome and appreciated.
I have created an Android application, which is working quite fine on all kinds of phones and tablets, but on some Galaxy S3 devices, the images are not loaded at all.
Here are the facts, both from myself and information that I gathered from the complaining users of the app:
all images are packaged in the application, in the drawable folder, so accessible from all resolutions
the images are referenced either by mypackage.R.drawable.image_id, or directly via #drawable/image_id in the XML
the images are semi-transparent and are stored in .gif format
there are about 40 images altogether, each is 25x25 pixels, the "largest" is 1.25Kb
for now I have got only complaints from S3 owners
the issue occurs on the standard OS and not on custom roms (at least I have no info about custom roms)
at least one S3 owner, who is facing the issue, claims that his phone is updated to the latest Android version
on many S3 devices the issue is not reproducible and the application works as designed
I am testing my apps on S2, S3, HTC Desire, Sony tablet S and of course the emulator - on all those I am not able to reproduce the issue
I am using FrameLayout, where the main drawing area takes the whole space, the controls (where the images are used) are packed in a LinearLayout, which is floating above
Here is a link to the application on the market:
https://play.google.com/store/apps/details?id=com.rts.android.spacesim&feature=search_result
This is NOT intended as some weird way to promote my app, if you are an S3 owner and decide to check if the issue is reproducible on your device, please write a comment here if it is and if not - what do you observe.
My questions are:
have anyone observed such an issue?
any ideas how to overcome it?
The following links suggest that GIF support might be broken again on 4.1, which most Galaxy S3's are running if I'm not mistaken. My personal phone is a Galaxy S3 at the moment, and I have 4.1.1 on it
GIF doesn't display on Samsung Galaxy Note 2
http://code.google.com/p/android/issues/detail?id=3422
Why not use png?

Google Android Fragmentation: Inconsistent CSS Rendering

Working on a mobile web application, I have found that some Android devices are rendering CSS differently than others. The detail on the site renders perfectly on every desktop browser I have tried on Windows & Mac, on iPhone, on every Android SDK Emulator I have tried, and even BlackBerry. While some Android devices render it perfectly, about half do not - and these "misrender" it in consistent ways. (For example, it looks great in a Galaxy, but is offset when using a G2.)
Aside from purchasing every single Android device on the market, is there any way to test CSS across all the devices available?
Thanks in advance!
In fact: you can use the emulator to replicate CSS differences. I didn't try enough variations.

Categories

Resources