Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-52936

*:hover in boostrapbase triggers double-tap issue in iOS browsers

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 2.9.3
    • Fix Version/s: 2.9.4, 3.0.2
    • Component/s: Themes
    • Labels:
    • Environment:
      iOS 9, Safari/Chrome, iPad Air and iPad Mini
    • Testing Instructions:
      Hide
      1. Using an iOS device, visit a page using a theme that has boostrapbase as a parent (e.g. Clean)
      2. Tap a link that has a :hover CSS rule (most links will)
      3. The link should activate when first tapped, not display its hover state.
      Show
      Using an iOS device, visit a page using a theme that has boostrapbase as a parent (e.g. Clean) Tap a link that has a :hover CSS rule (most links will) The link should activate when first tapped, not display its hover state.
    • Difficulty:
      Easy
    • Affected Branches:
      MOODLE_29_STABLE
    • Fixed Branches:
      MOODLE_29_STABLE, MOODLE_30_STABLE
    • Pull Master Branch:
      MDL-52936_master

      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.

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Votes:
                1 Vote for this issue
                Watchers:
                7 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  11/Jan/16