Details
-
Bug
-
Status: Closed
-
Minor
-
Resolution: Fixed
-
2.9.3
-
iOS 9, Safari/Chrome, iPad Air and iPad Mini
-
MOODLE_29_STABLE
-
MOODLE_29_STABLE, MOODLE_30_STABLE
-
MDL-52936_master -
Easy
-
Description
We have a theme which has boostrapbase as the parent. On iOS, the first time you tap a link on any page using the theme, the link shows the hover state and does not activate. The next time you tap any link, that link will activate.
I've tracked down the issue to the following rule in /theme/bootstrapbase/less/moodle/core.less:
.userenrolment .col_role .addrole,
|
.userenrolment .col_group .addgroup {
|
float: right;
|
padding: 3px;
|
margin: 3px;
|
> *:hover {
|
border-bottom:1px solid #666;
|
}
|
}
|
This rule causes two icons on the Enrolled Users page to show an underline when hovered. However, the *:hover appears to be causing the issue. Removing this, or changing it to a:hover, solves the problem.
Some research suggests that this is a known issue with iOS: https://blog.yorkxin.org/posts/2013/07/03/universal-hover-triggers-double-tap-bug-in-ios-safari/
I have tested this on both Safari and Chrome with this same result.
Unfortunately, I cannot provide precise instructions for reproducing this problem. In my testing, the Clean and More themes which also use bootstrapbase as their parent do not exhibit the issue, although they do pick up the *:hover rule.