我在iPad上的网页行为非常奇怪(仅)。我的 Web 应用程序基于 AJAX 加载。因此,页面的某些部分(如过滤器和主线框)是静态的,但计算的主要内容是通过 AJAX 加载的。
在内容中,用户已选中的过滤器选项由div元素(过滤器芯片)表示,就像在其他页面(如ebay)或任何地方一样。用户可以通过X-ing这样的芯片取消选中过滤器,或者只需单击静态内容上的过滤器复选框。芯片后面还有一个链接,以便一次重置/删除所有过滤器选项。
在过滤器芯片部分下,还有另一个部分用于对页面上的结果集进行排序。它表示为占据整个宽度的杆/梁。
它如下所示:
--------------------------------------------
| filter1 filter2 filter3 reset_all_filters | <--- FilterChips section
|--------------------------------------------
| sortByA | sortByB | sortByC | sortByD | <--- Sorting section
--------------------------------------------
单击reset_all_filters链接会导致重新加载内容。加载后,用户在重置后将看不到 FilterChips 部分,并且整个内容向上移动。因此,排序部分现在正好位于 FilterChips 部分之前的位置。
有趣的是,点击的reset_all_filters链接正下方的排序项目在加载内容后会获得悬停效果。
我假设点击指针仍然保持在该位置并导致下面的元素悬停。
对于那些想知道为什么FilterChips部分或排序部分属于加载内容的人: 这确实是我/我们(公司)必须重新考虑的事情。但与此同时,我们必须处理它。
那么对我的问题有什么建议吗?感谢每一个帮助!
在 1 月 13 日的一个较早的问题中,有人在 Apple 的文档中表示,这被描述为预期的行为。
https://stackoverflow.com/a/48217487/1503923
这里引用:
这似乎是 Safari 中的预期行为。Apple的文档说,单指点击作为鼠标事件处理,并显示点击期间引发的事件。点击开始时有一个鼠标悬停,但只有在您单击其他内容时才会触发鼠标悬停。这意味着 Safari 假设指针在下一次点击之前一直停留在同一位置,这意味着较低元素处于悬停状态是有意义的。
要解决您的问题,您必须在 css 中应用某种媒体查询或特殊的 css 规则,这将避免:hover
元素具有不同类型的样式。
a:hover { background-color: blue; }
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
a:hover { background-color: transparent; }
}
或某种其他处理方法,以确定您的用户是否拥有可能发生此问题的iPad或任何其他平板电脑设备。