mysterious html flickering on iPhone - javascript

I'm trying to use the Zebra DatePicker but for some reason when I tap the calendar (doesn't matter which part), that entire section flickers. If you click on your desktop it doesn't flicker, but strangely enough it flickers on my iPhone. Looks to be something related to mobile but I'm not really sure what could be causing this. Has anybody seen this type of flickering before?
I tried asking the original creator but he seems unexperienced in developing for mobile web.

The flicker could becaused by the highlighting effect on tap. Since Taps are usually only used on mobile devices this could be it.
Maybe some background element is highlighted on each click.
Try to define this rule for each element to see whether this is the cause of the flicker:
(Css rule)
* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

Related

iOS Safari: tap highlight (-webkit-tap-highlight) gets stuck on screen after tap end

Pretty simple problem: my single-page app has the normal WebKit tap highlight on Safari, so a translucent gray box appears and disappears when you tap. This is normal Safari behavior and is desired.
Sometimes, on an iPad, the gray box appears but does not disappear; the button tap goes through and the effects of the button are performed as expected (say, changing route) but the gray box remains until you tap again.
The gray box is not in the DOM - I'm nearly certain that it's Safari's tap highlight and not something we have added.
Counteracting "sticky hover" with #media hover(hover) { hover styles here } does nothing, so I don't believe this is a sticky hover issue.
Disabling the tap highlight with -webkit-tap-highlight: transparent; fixes the problem by making all tap highlights go away. This is not a great solution. The desired behavior is to have the tap highlights, and have them behave correctly.
This is a relatively new problem, so I assume we did something to cause this behavior, but I can't figure out what. Any ideas?
Thanks!
We had a similar problem when opening a web view in our flutter app on IOS, The issue was caused by Wrapping our entire app in a gesture detector which caused the -webkit-tap-highlight to get stuck on screen.
Not sure what stack you're using but hopefully this helps you or anyone with similar issues get it resolved.

Images are not rendered until after scrolling stops on iOS (PhoneGap)

I am working on a PhoneGap web app for iOS.
I have an implemented an infinite list, where as you scroll down the page, new elements are loaded from the server and added to the bottom of the page.
Each element added to the page includes images that are loaded asyncronously.
However, the images do not actually appear until after scrolling stops. This makes things appear sluggish, even though they are not - ie until I remove my finger from the device.
Does anyone know of a workaround for this problem?
This funky work around for safari will do the trick for you:
*:not(html) {
-webkit-transform: translate3d(0, 0, 0);
}
This will add the translate property to all elements causing the IOS browser to render your off screen elements and give you a silky smooth native like feel. Remember to check your functionality as it can mess with positioning of some elements. If if does add them to the 'not' list e.g:
*not(html, button, img...
This cannot be avoided. Image rendering on webkit-gradient IOS is executed in a dedicated US thread with real time priority.
https://news.ycombinator.com/item?id=3316383
I've noticed the same problem while building my application. The UI consists of many images and it only appears to render what's currently on the screen and when you go to scroll, everything else won't render until it's finished scrolling.
A solution that worked for me was adding an overflow: auto; property to the containers in your layout. When I add it, everything renders and there are no problems when you scroll.

Opening mobile menu in Chrome for Android by setting width only works first time.

So I'm trying to have a mobile menu that slides out on the left when an icon is clicked, and disappears again after you click outside the menu. Like this:
http://codepen.io/anon/pen/LzJuq (old, see new codepen below)
And it works fine on desktop and in Android's default Browser.
On my phone, in Chrome, the menu will only open the first time. Each subsequent time it closes itself before it finishes opening.
I can see that it tries to open... so I assume, because the #menu-icon is actually within the #content, it tries to run them both... but I don't exactly know what to do.
Edit: So I've changed it to just manually set the width instead of adding/remove a class that specifies the width: http://codepen.io/anon/pen/Bmdny
The menu consistently opens now, however the links in the menu seem to be 'transparent' on subsequent opens. I.e, I see the blank background of the menu, but nothing in/on it, but I can still click the links. If I zoom in, even just a little bit, it seems to force the browser to repaint and the menu items appear.
Everything seems to work fine in Android's default browser, just not in Chrome for Android.
I've tried commenting out the css transitions, to no effect. I've tried giving the menu items a z-index higher than the menu itself (I'm desperate, lol), no change.
I just don't understand what's going on.
Thanks.
Info:
Chrome for Android v32
Android 4.3
Samsung Galaxy Nexus
What navigator are you testing it on? I can't reproduce the error on my phone nor my tablet.
However, it seems that as the button is over the #content div, when you click on it, you are clicking both elements.
Try to remove the class only when the menu has it:
$("#content").bind( "click", function() {
if ($('#mobile-menu').hasClass('open'))
$('#mobile-menu').removeClass('open');
});
EDIT
Let's try to put an intermediate layer between the menu and the content. Let's bind the menu-closing event to this layer.
Have a look at this: http://codepen.io/anon/pen/jiyHI
After much searching, tweaking, and hair pulling I began to narrow the problem down to having overflow:hidden; on my menu.
I came across a few random posts of various sources that described a problem similar to mine, and there were always suggestions that it had something to do with the overflow property, but at first I didn't understand.
I was 'hiding' the menu by setting width:0;, so in order to hide the content as well, I had to set overflow:hidden;. If I commented that line out, the menu opened fluidly and consistently, but of course: I could see the menu items all the time. Not what I wanted.
I tried transition the display property to learn that you can't do that. So I tried the visibility property, and at first that didn't work either. However, I came across this post from a guy trying to transition the display property, and this answer happened to work for me.
I still don't understand exactly why this works, I think it has something to do with delaying the second transition so it doesn't stop the first... Here's the article he linked in his answer.
So I guess the problem really had something to do with Webkit and fixed/absolute elements with ul's in them... not repainting after certain... anchor tag clicks? Or transitions? Yeah, I still don't really understand. But it works now!

Android Element Selection Issues

I'm attempting to make my website tablet friendly and I'm facing a strange issue.
I am testing on an Android 4.0 tablet with Chrome 30.
I have a fixed modal popover screen. While this screen is on, we don't want to let the user scroll the background so touch events are prevented. However, in this window we have a scrollable area with overflow:scroll, therefore the touch event is not prevented if the touch start event is detected there. So far so good - Android responsibly scrolls the area as expected.
Problem is, if the user long-presses an element inside the scroll area for about half a second, and only then scrolls - the element where the touch started appears to be selected for a moment. That selection disappears after a bit. But, in case the user scrolls during that bit - the whole page scrolls instead of the scrollable area. It's as if the focus is changed. What's going on?
I tried to set CSS selection rules on the elements inside but it didn't help.
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
Every other answer suggests to prevent the touch event which I can't because it's meant to be scrolled. Any ideas what's causing this?
OK, I got it.
Add cursor:default!important to the above CSS rules.
I DID come across such a solution but it failed on first try. In my case, the specificity of elements inside the scrollable area was too strong, rendering cursor:default useless and I didn't realize it. I apply this only to mobile devices by detecting the useragent, therefore I can afford dismissing the previous cursor attribute with !important as it won't affect any desktop clients. Sweet!
Still not sure why this worked. If anyone could supply information on how the cursor attribute affects Chrome on Android I will be grateful.

Tapping Status Bar in MobileSafari does not work on my test page

I am trying to debug this and can't make any headway. I've got this HTML5 JavaScript library I am building and the test page for it can contain large volumes of output as I am piping console.log and exceptions out into the DOM to quickly inspect them on mobile devices (it is the only way I know of inspecting state on an Android device for instance)
Here is the page. So long as I don't push up broken code while I work on this you should be able to produce plenty of debug output which will be pumped into the <body> thus allowing the page to scroll. Note also to toggle the visibility of the big blue debug panel you can tap the header text at the top of the page (like a button).
The issue is specific to iOS: Tapping the iOS status bar does not work in either portrait or landscape modes, and I am not sure what it is I have done with JS or otherwise that has disabled this quite handy feature.
Use of -webkit-overflow-scrolling: touch appears to be the culprit for iOS6 here. It actually looks like iOS5 is less broken w.r.t. this issue.
I think there may be a way to work around the issue by dynamically setting -webkit-overflow-scrolling: touch on the elements that need it by catching touch events on them. Or just leave it off as they still remain usable (just have no momentum).

Categories

Resources