在通过AJAX加载内容后，iPad会触发对元素的悬停效果

Question

I got a very strange behaviour of my web page on iPads (only). My web application is based on AJAX loading. So some parts of the page, like filters and the main wireframe, are static but the main content that gets calculated is being loaded via AJAX.

Within the content the filter options, which a user has checked, are represented by div-elements (filter chips) as it is in other pages like ebay or wherever. The user is able to uncheck the filters by X-ing such a chip or just click the filter-checkbox on the static content. Also there is a link after the chips in order to reset/delete all filter options at a time.

Under the filter chips sections, there is another section for sorting the result set on the page. It is represented as a bar/beam that occupies the full width.

It looks like the following:

-------------------------------------------- | filter1 filter2 filter3 reset_all_filters | <--- FilterChips section |-------------------------------------------- | sortByA | sortByB | sortByC | sortByD | <--- Sorting section --------------------------------------------

A click on the reset_all_filters link causes the content to be reloaded. After the load the user won't see the FilterChips section after resetting them and the whole content moves up. So the Sorting section is now exactly on the position where the FilterChips section previously was.

The funny thing about this is, that the sorting item right below the clicked reset_all_filters-link gets a hover effect after the content has been loaded.

I assume that the tap pointer still remains on that position and causes the element underneath being hovered.

For those who wonder why the FilterChips section or Sorting section belongs to the loaded content: This is indeed a thing I/we (company) must reconsider. But in the meantime, we have to deal with it.

So are there any suggestions regarding my problem? Every help is appreciated!

Answer 1

In an older question from Jan'13 someone stated in the Apple's documentation this is described as an intended behaviour.

https://stackoverflow.com/a/48217487/1503923

Here the quote:

This seems to be intended behaviour in Safari. Apple's documentation says that single-finger taps are handled as mouse events, and shows which events are raised during a tap. There's a mouseover at the start of the tap, but a mouseout is only triggered when you click on something else. This implies that Safari assumes that the pointer stays in the same place until the next tap, which would mean it makes sense for the lower element to be in the hover state.

---

To solve your problem you would have to apply some kind of media query in your css or a special css rule which will avoid having a different kind of styling for your :hover element.

a:hover { background-color: blue; }

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
    a:hover { background-color: transparent; }
}

Or some kind of other treatment to determine if your user has an ipad or any other tablet device where this problem might occur.