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

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

    XMLWordPrintable

Details

    • Bug
    • Status: Closed
    • Minor
    • Resolution: Fixed
    • 2.9.3
    • 2.9.4, 3.0.2
    • Themes
    • iOS 9, Safari/Chrome, iPad Air and iPad Mini
    • MOODLE_29_STABLE
    • MOODLE_29_STABLE, MOODLE_30_STABLE
    • MDL-52936_master
    • Easy
    • 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.

    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.

      Attachments

        Activity

          People

            marxjohnson Mark Johnson
            marxjohnson Mark Johnson
            Tim Hunt Tim Hunt
            Andrew Lyons Andrew Lyons
            John Okely John Okely
            Huong Nguyen, Bas Brands, Mathew May
            Votes:
            1 Vote for this issue
            Watchers:
            6 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:
              11/Jan/16