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

Page scrollbars on Firefox are too thin, difficult to use

    XMLWordPrintable

Details

    • Bug
    • Resolution: Won't Do
    • Minor
    • None
    • 4.0.7
    • Accessibility, Themes
    • MOODLE_400_STABLE
    • MDL-77803_401-alt
    • MDL-77803_402-alt
    • MDL-77803-alt
    • Hide
      1. Login as admin using different web browsers:
        1. Firefox (Windows, Linux, Mac)
        2. Chrome (Windows, Linux, Mac) 
        3. Safari
      2. Navigate to a course page with at least 20 activities
      3. Make sure the course content can scroll
      4. Make sure block toggle button can triggered
      5. Verify the scrollbar and block toggle button can match in same position showing both and without extra gap between toggle button and scrollbar.
      6. Verify the use of visual-scroll-x class and/or the thin-scrolls mixin throughout the site (home, reportbuilder, etc).
      Show
      Login as admin using different web browsers: Firefox (Windows, Linux, Mac) Chrome (Windows, Linux, Mac)  Safari Navigate to a course page with at least 20 activities Make sure the course content can scroll Make sure block toggle button can triggered Verify the scrollbar and block toggle button can match in same position showing both and without extra gap between toggle button and scrollbar. Verify the use of visual-scroll-x class and/or the thin-scrolls mixin throughout the site (home, reportbuilder, etc).

    Description

      This issue pre-dates MDL-73771, but is made more obvious with the large gap that now exists between the "<" block button, and the very narrow page scrollbar:

      Firefox (Ubuntu)

      Chrome (Ubuntu)

      It's because of this line:

          // Firefox.
          scrollbar-width: thin;
      

      For reference, see this from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

      Accessibility concerns

      Use this property with caution — setting scrollbar-width to thin or none can make content hard or impossible to scroll if the author does not provide an alternative scrolling mechanism. While swiping gestures or mouse wheels can enable scrolling on such content, some devices have no scroll alternative.

      This is the current issue, it's a cause of great frustration trying to use a mouse to click/drag an extremely narrow page element

      Attachments

        1. Chrome.gif
          Chrome.gif
          245 kB
        2. Firefox.gif
          Firefox.gif
          89 kB
        3. RB.gif
          RB.gif
          567 kB
        4. scrollbar_linux_firefox_hover_1.png
          scrollbar_linux_firefox_hover_1.png
          753 kB
        5. scrollbar_linux_firefox_hover_2.png
          scrollbar_linux_firefox_hover_2.png
          729 kB
        6. scrollbar_linux_firefox_hover_3.png
          scrollbar_linux_firefox_hover_3.png
          730 kB
        7. scrollbar_linux_firefox_visual-scroll-x_class.png
          scrollbar_linux_firefox_visual-scroll-x_class.png
          869 kB
        8. scrollbar_macos_chrome.png
          scrollbar_macos_chrome.png
          472 kB
        9. scrollbar_macos_firefox.png
          scrollbar_macos_firefox.png
          462 kB
        10. scrollbar_windows_browserstack_chrome.png
          scrollbar_windows_browserstack_chrome.png
          763 kB
        11. scrollbar_windows_browserstack_firefox_hover.png
          scrollbar_windows_browserstack_firefox_hover.png
          417 kB
        12. scrollbar_windows_browserstack_firefox.png
          scrollbar_windows_browserstack_firefox.png
          405 kB
        13. scrollbar_windows_firefox_report_builder.png
          scrollbar_windows_firefox_report_builder.png
          253 kB
        14. windows-after-nodrawers.png
          windows-after-nodrawers.png
          101 kB
        15. win-ff-after-patch.png
          win-ff-after-patch.png
          111 kB
        16. win-ff-before.png
          win-ff-before.png
          110 kB

        Issue Links

          Activity

            People

              carlos.castillo@moodle.com Carlos Castillo
              pholden Paul Holden
              Pedro Jordao Pedro Jordao
              Votes:
              5 Vote for this issue
              Watchers:
              11 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 2 weeks, 5 hours, 46 minutes
                  2w 5h 46m

                  Clockify

                    Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.