I was faced with this problem on IE11 Mobile (Lumia 520 Phone) on an existing navigation menu, where every link inside my submenus were not firing a click, on the first tap.
This fiddle repro is a partial flyout accessible navigation menu, taken from a sample WAI app menu.
If you test it on IE10 or IE11 Mobile or Touch, you will obverse that none of the submenu links work.
They must be clicked twice to fire the click events.
Why is that?
This bug is a result of a feature to "help simulate hover on touch-enabled devices" that was deployed starting in IE10-11 for Touch.
In short, what causes and requires the double tap is having aria-haspopup=true as the submenu parent element level. Because of it, IE Touch wrongly assumes all those links are toggle themselves and treat them as such. I shall also note that for similar reasons, iOS Safari has its own way to treat elements with “:hover[s] that either hides or shows another element using visibility or display”.
As explained on MSDN’s Internet Explorer 10 Samples and Tutorials:
Alternatively, Internet Explorer 10 adds new behavior to the existing aria-haspopup property to simulate hover on page elements with hidden interactive content.
The issue is that while it was supposedly designed to be helpful, that implementation is based on an incomplete and somewhat misguided reading of what aria-haspopup is, and what it is supposed to do.
aria-haspopup is technically a property (and not state). Meaning that IE placed a touch behavior on an element that isn’t supposed to change at runtime. Unless a responsive context would perhaps require such a change; aria-haspopup='true' shall remain true even if the popup element is shown. The state for the switch being aria-expanded instead.
The concept only works for the MSDN example of aria-haspopup as implemented on that tutorial. i.e. If aria-haspopup=true is placed on the toggle button itself, that IE Touch feature will work as intended. However if the aria-haspopup=true attributes is placed at the parent level like my repro, or like a more traditional app menu, as per this W3C/WAI example, it's a problem.
The solutions to go around this bug are to, either not use aria-haspopup=true on parent elements because of IE10-11 Touch (which sucks for accessibility), or remove it from touch enabled IE10/IE11, either on the server side or with Javascript accordingly.
Related
This is my website for a school project, it is designed to be viewed on a phone. I have a dropdown menu on it near the top that uses hover, which does not work on touch devices. I need to make this work with clicking (I don't really care if hover still works, I need to click) but do not know how. How do I make this work with tapping on a touchscreen? I really want to stay away from javascript for now and just use HTML and CSS. I am very new to webdesign so I will need a very basic explanation. Also I know my images take a long time to load, any suggestions on how to address that would also be appreciated.
Thank you!
Most touch devices lack the ability to provoke a true hover interaction (some exceptions would be the Samsung Galaxy Note with pen, Microsoft Surface devices with pen, and the iPad Pro with pen).
That said, touching an element that has a :hover pseudo selector with associated styles (as you do) should invoke that hover event, even in mobile browsers on touch devices.
Have you viewed your website on a touch device? The menu appears as expected with tapping on my Google Pixel (with Chromium browser) as well as on my Surface device in tablet mode.
There may be some browsers/devices or combinations thereof that do not exhibit this behavior, but I believe it's quite standard.
If you need a more principled solution, I'd suggest making the nav toggle a <button> element and executing some basic JavaScript on click events. I realize you don't want to stray into that territory right now, but that's exactly the sort of use case at which JavaScript excels.
If you really want to avoid JavaScript and you don't like relying on the touch-invokes-hover-event approach, there's always the checkbox hack. As the name indicates, it's a hack. I wouldn't recommend it for your particular use case. But to each his/her own.
Here's a CSS Tricks article on all the interesting uses the checkbox hack can be applied to.
I am working on a website using Bootstrap and have a problem I can't seem to fix. Here is the draft of the site.
On the "What We Do" panel, I made a clickable modal window on the first thumbnail box (it says "Enterprise Software development" under the thumbnail). If you click the thumbnail on a non-mobile device, a modal window will pop-up.
On a desktop computer (or laptop), it works just fine. But on a iOS (iPhone, iPad, etc.) it doesn't work at all: i.e. tapping it doesn't bring up the modal window.
However, if you look lower on the page at the "Who We are" panel, there is a "See more about Tim..." button. If you click or tap on that button, it will work across all devices (include iOS).
The only difference I can see between the two is that the first one is on a <div> tag, whereas the second one is on a <button> tag.
Does Bootstrap not support starting up a modal window from a <div> on an iOS device? If it does, do you see anything wrong with my code that would make it fail only on iOS devices?
Chris's answer is correct. Changing the div to a button would help clarify your markup. If, however, you need to keep the same markup, you can also add cursor: pointer to your div element to let safari know that this is something that might be clickable. It also let's mouse users have a standard visual cue that the element is clickable as well.
Just add the class clickable and then include the following CSS:
.clickable {
cursor: pointer;
}
Here's an MCVE in Fiddle with the fix as well
notice I haven't used Bootstrap's btn classes here because they will add the cursor rule automatically.
This isn't Bootstrap-specific at all, it's a general problem on iOS. By default, many not-usually-interactive elements (such as <div>s) aren't clickable/tappable on iOS.
See https://github.com/facebook/react/issues/134 and the links & follow-ups therein for some more details.
If possible, use a <button> or <a> instead. A <div> for an interactive element isn't very semantically appropriate anyway.
I have a simple crossword puzzle app with a list of clues. The clues are in a selector so clicking one will highlight a line on the puzzle. This works fine on PC/Mac but on iPhone it defaults to safari's scrolling select menu that u have to flick to select. So unless you open the scroll menu, u can only see one option in the middle of the big area I made. I'd like my selector to show all its elements like a normal list, which is how it works on non-mobile browsers.
Can I overide Safaris custom select or at least make more of the elements visible before touching the wheel?
Here's what it looks like on PC/Mac
http://mayaincaaztec.com/incacrosswords.html
For several times I have encountered a strange behavior of our web-pages: if I just open the page it looks in one way, and if I view some element of that page with the developers tools provided by my browser - the appearance of the element changes. It really looks like some refresh event is thrown if I click on some div and look at it in development tools.
Does anyone know what happening?
For example, in my current situation I have some div, with semi-transparent background which should move after some event occurs. It moves in all the browsers except for opera. In Opera the is not shown at all. But in case I check that div with Opera Development Tools the div becomes visible! When I switch to standart mode - it becomes hidden again.
What happens when I track some div's data with development tools?
This is common behavior of all visual development editors and debuggers. In order to allow editing/debugging of the items, they overwrite the visibility properties of the components to TRUE.
Returning in normal mode, of course will set all properties to its real value.
I am designing a mobile website. On the homepage i have menu items say 'a' ,'b' ,'c',...,'h'.
I want to display only first three menu items and make a 'View All Items' button that on clicking expands to show all the items.Also the button should become 'Show Less Items' after clicking on it.
I want to do this using only HTML5 and CSS3 and no JavaScript.
Also i want this functionality to be reusable around the website.
How should i do it?
--Thanks in advance!
Modern mobile browsers all support JavaScript, but give end users (at least in Android's case, not sure about iOS) a configuration setting to disable it.
Your best bet as a developer is to use the "fail safe" strategy: Ship the HTML with the menu fully expanded, and use JavaScript to collapse the menu immediately on load (or on DOM ready). That way, if you have mobile users with JavaScript disabled, they will see the whole menu. Most of your users should have JavaScript enabled, in which case they will get the expand/collapse functionality you describe.
It's unrealistic to expect to implement this without JavaScript, and if you can find a workaround I don't believe it to be as stable as simply using JavaScript. In terms of hiding the menu items you could set their CSS property to display: none; and place a button which targets these menu items and toggles their display property.