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

Page scrollbars on Firefox are too thin, difficult to use

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Won't Do
    • Icon: Minor Minor
    • None
    • 4.0.7
    • Accessibility, Themes
    • MOODLE_400_STABLE
    • MDL-77803_401-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).

      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

        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

            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

              Created:
              Updated:
              Resolved:

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

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