So I have a page setup with tiles/buttons in the main body section. These tiles have a :hover state and a :focus state. Focus state was added for accessibility purposes.
Weird problem I'm having is when users scroll down the site on mobile browsers, if their thumbs are touching the tile/buttons when scrolling down, then the :focus state gets triggered and the tile looks clicked or activated.
Is there a way to disable focus state activation on scroll and only activate on a direct tap or touch?
Related
I have in my web app a login modal with a form of two fields. When user moves between the fields, the page auto scroll and move the modal. I’ve checked all the similar questions and have been trying all suggested solution but no one suits. Because of top navbar in the background being scrolled too (although it’s position=sticky) I’m guessing it’s and accessibility feature which I’ve wondered how to disable. Tip will help!
I currently have the issue where I have a div with touch-action: none. The user drags/scrolls on this div, then he can interact with UI (links/buttons) outside of this div.
The issue: If the user scrolls on the div and then immediately interacts with UI outside of it, then it won't register any interactions. Sometimes it helps if I wait a couple of seconds, other times the only fix is to tap twice.
This only happens on Mobile Chrome. Firefox on a mobile, for example, does not have this issue.
Does someone know why this happens, and how I could circumvent this issue?
If you have such a mobile phone and run Chrome, you can see it in action here: https://codepen.io/BigBoomer/pen/BaZwgRZ
The use case is that I have to display menu items when user hover on a particular row. It seems that it is not working properly on iPad. Is there any work around for that?
Help appreciated, Thanks
These following are not supported on iOS
Mouse-over events
The user cannot “mouse-over” a nonclickable element on iOS. The element must be clickable for a mouseover event to occur as described in “One-Finger Events.”
Hover styles
Since a mouseover event is sent only before a mousedown event, hover styles are displayed only if the user touches and holds a clickable element with a hover style. Read “Handling Events” for all the events generated by gestures on iOS.
This implies that :hover is only supported on clickable elements. Clickable events are defined here as:
A clickable element is a link, form element, image map area, or any other element with mousemove, mousedown, mouseup, or onclick handlers.
With that said, if you want to provide a consistent and reliable user experience on iOS, your best bet is to design for touch, since that's what it's made for. This is a part of the answer from previously asked questions
my website is using a pure CSS3 dropdown menu. The problem is when the website is view on touch screen device, some of the menu item with hover property doesn't auto drop down.
How can I change it to be like, if the menu item has a hover dropdown, in touch screen devices you have to touch it then the menu will drop down where else in our PC it will still remain the hover effect.
Can it be done by using CSS only?
Have you tried using aria-haspopup to simulate hover on touch-enabled devices
Take a look at this article.
On a page element such as a menu, set the element's aria-haspopup
property to "true". When an Internet Explorer 10 user on a
touch-enabled device first taps the page element, the user's
experience will be identical to that of a user who hovers over the
element with a cursor.
I'm not sure what the browser support for this is like though.
"hover" is not really a feature of touchscreens since it needs to have a mouse pointer involved. If you are using a good library that supports touchscreens, it should also work. If not, try another library or write something your own.
Rather than change browser once again, anyone know a trick to allow this to happen:
I have a dropdown menu at the top of a website containing a settings button. When you hover over the settings button, the settings panel shows and when you hover off, the settings panel hides.
In chrome, if I use developer console to inspect that settings panel, when I hover over the settings button, the settings panel pops up and I can inspect elements inside it.
In IE10, when I hover over the settings button, it just inspects the text rather than bringing up the settings panel.
Any ideas on how to get IE10 to allow the hover over events to trigger so I can in fact inspect the elements inside the menu.
Thanks for your input!