Top-fixed navbar jittering on Android browsers while scrolling? - android

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.

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

Text-shadow rendering on Android 4.4.2 bug

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

I see ad landing page rendering issues on some devices for my app, mostly on samsung. How should I investigate it?

So I have an app wherein ads appear at the bottom of the screen. When the ad is clicked, landing page should open in the device browser. However in some cases, it opens in the bottom area on the app itself (where the ad is shown). Has someone else also faced this issue? How to drill down to the reason? How to fix it?
I tried testing the app on a number of devices and saw the same happening for Micromax as well. The issue was seen on Samsung Galaxy : Android 4.4.2, Kernel version 3.4.0, Chrome 37.0.2062.117; and on Micromax: Android 4.4.2, Kernel version 3.4.67, Chrome 35.0.1916.141
I also tested the landing page url on mobi.ready and it reported some XHTML markup issues. Is that the reason?

Bootstrap 2.1.1 Website Issue - Thumbnail Image Blue Glow On Chrome Mobile

I just recently updated my Chrome app on my Galaxy S3. Now my personal website that I created using a bootstrap 2.1.1 template is having a strange issue in my portfolio. When I select an image to go full screen, the thumbnail highlights blue, but overlaps the full size image.
Does anyone have any idea why this is happening? I've tried every other web browser, even the desktop Chrome version and everything looks fine. Again, this started after i updated my Chrome browser on my galaxy s3.
The links below show screenshots of my galaxy s3 in portrait and landscape so you can understand the issue better.
Links:
http://imgur.com/27ejG8q,RoQrTOG#1
http://imgur.com/27ejG8q,RoQrTOG
Thanks,
Josh

Android/Opera Mobile - responsive-nav.js not pushing content down

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.

Categories

Resources