I have created a simple FastClick implementation. Issue I will be describing occurs with FastClick but since it seems more like a browser bug, i decided to create non-FastClick version to represent the issue.
https://jsbin.com/fofaxiniya/1
Test this on iOS device or simulator running iOS 8.1 or up.
Scenario:
at least iOS 8.1 or up
A simple page with two buttons with active and hover states.
touchend handler that creates a synthetic click event and disables the original click event.
Steps to reproduce:
On the device or simulator,
Click on the first button
Click on the second button that removes itself from DOM on click
The hover state of first button gets triggered.
Why is this annoying?
Because of this weird behaviour, combination of FastClick and Single page application leads to some button randomly being hovered on navigation. Which is definitely unwanted behavior.
I am already considering removing all the hover styles from touch devices. But if I could actually target the problem itself, which is getting rid of the random hover from happenning, that would be great.
Any attempt to shed some light on this will be highly appreciated. :)
Related
We have a PWA (web app) that the user can add to the homescreen to make it look more like an app. Some users have reported a strange issue that only seems to appear on IOS sometimes when the following step has been made.
Open the app from the homescreen
Use the app for a while
Put it into background
Turn off the screen for a while
Turn the screen back on and put the app to foreground again
The bug is that nothing seems to happen when you click on a select or date input control. First I thought that there was some overlay in the app that was blocking the ui controls but the elements receive focus on click, but not options are shown.
Now it really becomes strange. When I tried to click a little bit under the select input an option was selected. The same thing occured with a time select. If I first clicked on the timeselect input control and then a little bit under, it updated the time.
So, the controls seems to be there but nothing is visible on the screen. I have only been able to reproduce this on my own once but multiple users have been reporting the same thing. The only way to work around the bug is to restart the app.
It seems to be for all native safari controls that shows some kind of modal/popover.
I've did an indepth investigation on this select dropdown problem and posted an issue at bugs.webkit.org: https://bugs.webkit.org/show_bug.cgi?id=238318
It's a problem with dropdowns of several components (such as select, input file/date/month) where either the animation to have the dropdown appear or disappear seems to get stuck. You can sometimes see the dropdown being tiny and very transparent (if you zoom into a screenshot) and sometimes you'll be able to select an option even though you don't see the dropdown.
I have recently updated device to iOS 10 and facing issues with hiding iOS keypad when i switch from one view to another.It was working well with iOS 9.3.
Programmatically what i have done is, i was intercepting some element and auto focusing one input box when i navigate to second view. And when i move back to first view it was getting hidden but now with 10.0 it doesn't hide it automatically.
Because of privacy concern i am not able to post my code here but this is an angular code where i have written a directive which intercepts clicks on input box in the second view and auto focuses the same which in turn makes keypad popping up.
Now my requirement is to hide this keypad when i move back to first view.
As iOS 10 is very recently released any help or suggestion on this will be greatly appreciated.
N.B: Everything works well with iOS 8 and 9.
Here is what i have tried:
Tried hiding active DOM element.
document.activeElement.blur();
Also tried calling blur using target property of $element by passing that to my link function in the directive.
It looks like this is a bug in safari. I had the same issue today and was able to reproduce it with this fiddle:
https://jsfiddle.net/Lz652478/6/
It looks like if an input is removed from the dom via a touch event, the keyboard will become sticky. I've been able to get around it in my app by manually calling blur at the start of my event handler, before the route changes and the input is removed from the dom.
I am New to Phonegap Development, I am Using jQuery mobile to create my UI. I have two Issues here,
Response of button for touch event is very slow. Why..?
I have Created a form with some elements like 2 Inputs text type, 2 Button one after another.
M problem is when I click on input, the keyboard popup makes the page move up, that's OK but when I press the keyboard resign button, the page stay little up.
Can you please help me out..!
and how to Optimize the responsiveness of JQuery mobile UI. I have completely avoided the images.
First, you can follow this link to remove the delay (300ms) from the click event.
And for the second one, i hope you are facing this issue for android. if so, then you need some changes to be done on the AndroidManifest.xml
Use below android property in application tag,
android:hardwareAccelerated="false"
android:windowSoftInputMode="adjustPan"
Will look something like
<application android:icon="#drawable/icon" android:label="#string/app_name"
android:hardwareAccelerated="false"
android:windowSoftInputMode="adjustPan">
This should resolve your issue.
I'm having an issue with KendoUI charts which started occurring on iOS 6 devices, which I have reproduced in Safari, Chrome and Mercury.
When a user performs a "taphold" action (touching the screen and keeping the finger pressed for about a second) over an element, the element is highlighted in blue and the "copy/select/select all" context menu is brought up, as shown in the following screenshot.
This seems to occur for any type of element so it is not necessarily a KendoUI issue, but in case anyone else has encountered this, I would like to know if it is possible to somehow disable this feature. I've tried using the jQuery .disableSelection() method, but to no avail.
The reason for needing to fix this is that my app has some functionality bound to the jQuery mobile "taphold" event when performed on a chart, and the selection of the chart or one of its elements, along with the context menu appearing, can be distracting and confusing for the user.
Thanks!
Try the css rule -webkit-user-select:
-webkit-user-select: none;
I have a cordova app. I have written some custom code in file for swipe actions using touch events, mouse events which will identify the touchmove and swipe. I have a hamburger menu at the top left corner of my app. On clicking this will open a side panel with some animation. on opening the app in latest ios 13, first time click anywhere on the screen is having MouseEvent with x,y,screenX,screenY,pathX,pathY values as 0. this triggers the hamburger menu which is at the top left corner of app and opens the side panel.
Why is the first time click event on screen returns x,y values as 0?
This issue doesn't occur in Android device or iOS <= 12.0 version. Only observed in iOS 13.
On removing my code specific to touch, swipe events. Then this issue is not replicable.
I have another observation. As ios13 supports the pointer events, I have just tried to add code related to pointerEvent
document.addEventListener('pointerdown', function() {
console.log('pointerdown event');
})
This worked for me without removing any code related swipe.
Why there is such difference in the behaviour with the code.
Thanks in advance.
Thank you for your description, we also effected by this issue. Sometimes we experience "ghost" clicks on previous clicked place in our cordova app.
Only happens with iOS13, with both UIWebView and WKWebView.
Seems pointerdown eventlistener is a workaround for this.