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;
Related
I’m working on a page where we have no access to the platform code (think page builder).
I’ve used jquery to launch some tooltip targets when a trigger is clicked, and because of the limited platform access I use jquery to traverse up the DOM and bump the parent div’s z-index up high so the tooltip sits over the button.
On either second click or timeout the z-index goes back to 1 and tooltip goes away. All this works fine on desktop.
iOS however, shows the tooltip and if you scroll down it almost immediately drops the z-index down so it goes behind the buttons.
Has anyone encountered this annoying behaviour? And is there a workaround?
I’ve tried forcing !important on the tooltip, no luck. I also tried applying transform 3D 0, transform-z, with no luck.
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. :)
Posting this question largely in the hopes of confirming my suspicions of the behaviour, and thus documenting it for other programmers. (Since I found no record of this anywhere online)
I have a site that I'm building, whose nav bar has the following properties:
The horizontal section is a <ul> of <li>s and some of the <li>s hav both:
A n<a> element taking you to that topic.
A hover CSS selector that triggers display:block on a submenu - a nested <ul> which then drops down vertically.
On a desktop this all behaves as I'd expect: hovering on the key element exposes the submenu, and clicking on it executes the click event (in this case a normal <a> link.
But on an iOS device (tested on Air, Mini, iPhone 6) I found that tapping once would expose the submenu, and tapping a second time (when the submenu is open) will actually invoke the link on the controlling element.
Long-pressing will bring up the "link context menu"
This is exactly what I wanted it to do, which is GREAT! But I don't know WHY it is doing it. Whilst the Menu is Bootstrap based, but I can't find any bootstrap that is doing it.
Currently my best guess is that iOS Safari has some magic code that adds this (obviously desirable) behvaiour by deciding that if you have an element with :hover CSS (or, I imagine, an onhover eventhandler bound) and also a click eventhandler bound then the first tap will invoke, and keep invoked, the hover event, and the second tap will invoke the click event.
Question:
Does anyone know, confidently, what the source of this behaviour is.
Can anyone find any documentation of this behaviour!?
Would people like to contribute other platforms on which this does/doesn't work (Android tablets? Windows tablets? older iOS?)
The behavior triggering a clickable element such as an anchor link to fire only on the second tap in iOS, is described in this post by Nicholas C. Zakas (#slicknet). What triggers the double tap is a:
:hover Rule that either hides or shows another element using
visibility or display.
e.g.
<style>
p span {
display: none;
}
p:hover span {
display: inline;
}
</style>
<p>Tap me<span>You tapped!</span></p>
Apple also provides a documentation on Handling Events for reference.
No other platforms do this. It's iOS specific since at least version 5 (likely since version 1). Because it's not cross-platform, for Android and other touch devices, it has to be handled differently, and requires canceling click events etc... using JS. While I have managed to do this. I think it's fair to say that for CSS navigation menu bars to work with toggle elements that are both links and toggles is very difficult to achieve in a touch-only environment.
I have two datetimepicker instances on my page. I have hidden the NOW button from one of the datetimepickers by setting display:none on its css for "focus" event.
The strange thing is on IE it hides the NOW button, but when I click on the calendar date, the button comes and goes (flicker). I don't see this behavior on Firefox and Chrome. Any idea why this happens and how to overcome this?
Does it specifically have to hide on focus? If it were always display: none then you likely wouldn't have that problem.
I'm sure I'm not the only person asking this question. When you have a jQuery UI implementation, and you use the .buttonset(); command to turn a set of checkboxes into a button-set (multi selectable), I'm having trouble when a user de-selects an item after selecting it.
So let's say on hover, it turns into a certain colour (based on the settings of the jQueryUI theme I downloaded), and after clicking, it turns into the active state colour. When I click the same item again, and move the mouse away, it remains the hover colour, causing confusion as to whether the item is deselected or not.
And this only happens on Firefox only - seems to work fine on Chrome & Safari.
Here's a demo link: http://www.tylervolker.com/mls-search
I tried to force a blur() event to these items but no dice it seems.
$('.label').click(function(){
$(this).blur();
});
What am I missing? Or is this just a Firefox thing I need to live with until either jQueryUI updates their code, or Firefox appends this?
This appears to be this known jQuery UI bug - http://bugs.jqueryui.com/ticket/5518. The button widget isn't set to be addressed by the jQuery UI dev team until 1.11 so I wouldn't expect a fix for this anytime soon.
There are some suggested workarounds in the related issues on that ticket.