2

Related - but not a duplicate: Please remove scrollbar-width: thin from code blocks AND fix the missing ends


In Firefox: if (at the very least) the last character before a code block and the first character in the code block is selected, the scroll bars on the code block can only be dragged a few pixels before stopping.

The cursor changes to the unavailable cursor, and the dragging stops. The mouse scroll still works, as does clicking the (invisible) end arrows, or clicking the space outside of the scroll handle to move a page at a time. This affects code blocks with horizontal, vertical, and horizontal and vertical scroll bars.

Here is a sample code block with (horizontal) scroll bars to reproduce the issue.

// Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

For completeness, here is an answer with horizontal and vertical scroll bars which also demonstrates the issue.


Reproduced (on Windows 10) in:

  • Firefox 71.0 (64-bit)

  • Firefox 74.0 (64-bit):

Appears to be fine (on Windows 10) in:

  • Chrome 80.0.3987.106 (Official Build) (64-bit):

  • Edge 44.18362.449.0:


I suspect that this is to do with the differences in how the scroll bars are displayed by different browsers, e.g.

  • Firefox has square scroll bar and no end arrows,
  • Chrome has a round scroll bar and no end arrows,
  • Edge has a square scroll bar and end arrows.
8
  • 2
    That looks like a browser issue, not an issue with the site itself...
    – Cerbrus
    Mar 10, 2020 at 15:30
  • Should I retag this question? It seemed like the tag description for the 'bug' tag seemed to fit this issue.
    – Wai Ha Lee
    Mar 10, 2020 at 15:33
  • 1
    Well, It should probably be reported in the browser's issue tracker, instead of here.
    – Cerbrus
    Mar 10, 2020 at 15:35
  • 1
    What I expect is happening is that the selection spanning the start of the <pre><code> elements results in Firefox considering the elements to be selected. Thus, the scrollbar is within the selection. You clicking on the scrollbar and moving the mouse is then recognized by Firefox as an attempt to drag the selected text, rather than an attempt to move the scrollbar. This is definitely not an issue with SE, but is just how Firefox treats that situation. It has nothing to do with the CSS which SE uses to hide the scrollbar arrows (I use CSS styles which restore them and I see the same issue).
    – Makyen Mod
    Mar 10, 2020 at 16:35
  • 6
    I'm voting to close this question as off-topic because the problem is with Firefox itself as opposed to something special that the site is using that Firefox does not support. I've reproduced this problem on other sites in Firefox.
    – Wai Ha Lee
    Mar 10, 2020 at 16:40
  • 1
    My work imposed 66.0.5 version of FF does not appear to have the problem FWIW.
    – Dave
    Mar 10, 2020 at 17:06
  • 1
    As a workaround: After making that sort of selection you can move the scrollbar freely with the arrow keys. Tested on FF 73.0.1 under W10. Mar 10, 2020 at 17:59
  • Aha - thanks to everyone for the feedback. Somehow I'd convinced myself that it was an obscure bug in the site - as I was aware that the scroll bars had changed recently I assumed it was a side-effect of that. I've not deleted this post in case anybody else comes across this issue - at least then they'll know it's Firefox at fault.
    – Wai Ha Lee
    Mar 10, 2020 at 20:24

0

Browse other questions tagged .