Background image rendering on Mobile - android

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

Related

Incorrect webpage rendering in hybrid app

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?

Samsung S6 and S6 Edge WebView Issue

I have an activity which handles any URL events within my application and it opens them within a web view. The issue which I currently have is that if i turn off the WiFi and turn it back on the URLs which were previously working before in the webview do not load and it eventually timeouts. The puzzling thing is that I have tried this within the same application across other phones (HTC, Samsung S5, LG Nexus 5, Samsung S4, One Plus One) and it works perfectly.
I am wondering if anyone has a solution for this or at least an explanation as to why this is happening.
The reason I'm asking this is on here is because although it seems to be a device specific issue, before to get another issue with my webview to work with samsungs i had to enable webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
I want to know if there would be something similar to help me with this S6 issue.

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.

Top-fixed navbar jittering on Android browsers while scrolling?

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.

Categories

Resources