Can't click the horizontal scrollbar in a code block if you're not at the bottom of it


  • Notification Spam Recipient

    So... Not sure if this is a Chrome-specific issue, but I'll try to recreate it here.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
    
    blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis 
    eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent 
    claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores 
    legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem 
    consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
    blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis 
    eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent 
    claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores 
    legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem 
    consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
    
    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent 
    claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores 
    legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem 
    consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit 
    litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
    
    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores 
    legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis 
    videntur parum clari, fiant sollemnes in futurum.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum
     claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
    

    The above doesn't get shortened in preview, but I think it should when posted.

    Anyways, for incredibly tall and wide code blocks, we get both horizontal scrollbars and vertical scroll bars.
    The vertical ones work as expected, but for reasons unknown you can't interact with the horizontal bar unless it's visually outside the code block div.


  • 🚽 Regular

    @Tsaukpaetra It works for me on Vivaldi 1.1.453.59 (Stable channel) (64-bit).


  • Notification Spam Recipient


  • 🚽 Regular

    @Tsaukpaetra Maybe. Also works in Opera 37.0.2178.43.


  • Java Dev

    ENOREPRO on firefox 46.0.1


  • Notification Spam Recipient

    Huh. I just tried it on the default theme, and it seems working.

    Whelp, that's another shot in the face for custom themes being broken in NodeBB then?



  • @Tsaukpaetra said in Can't click the horizontal scrollbar in a code block if you're not at the bottom of it:

    but for reasons unknown you can't interact with the horizontal bar unless it's visually outside the code block div.

    I'm not sure what that means, but I just dicked-around with it and any time that horizontal scroll bar is visible at all, it works correctly.

    Maybe it's a z-order problem and you have some invisible element covering it up? I dunno.


  • 🚽 Regular

    @Tsaukpaetra Possible. I'm using the default theme, just highly stylized.


  • Notification Spam Recipient

    This is my result for trying to move the horizontal bar to the right:
    0_1463765270246_upload-fce0c402-c054-416f-8cfc-627b50fa2ca1

    There's also a weird margin thing when at the bottom (where I can use the bar):
    0_1463765327214_upload-e6a994f0-cfd3-4fd3-9aa5-673f4b699f8b


  • I survived the hour long Uno hand

    @Tsaukpaetra I'm on a custom theme (Superhero) and it works fine.



  • Works here in Chrome Version 50.0.2661.102 m (64-bit) on Windows 10, but I have overlay scrollbars enabled which is non-default.



  • @Tsaukpaetra Repro in Chrome Version 50.0.2661.102 m on Windows 7.

    I can only scroll horizontally if scrolled vertically all the way to the bottom.

    If I try to scroll horizontally while not scrolled to the bottom, it just starts selecting text as described.


  • Notification Spam Recipient

    So I just flash-tested all the available custom themes, this is the list of themes where this breaks:

    • Cerulean
    • Cyborg
    • Darkly
    • Flatly
    • Journal
    • Lumen
    • Paper
    • Readable
    • Sandstone
    • Simplex
    • Slate
    • Spacelab
    • United

    All the other themes (including default) are not affected by this glitch.



  • The fact that themes can break this is, well... maybe blakey will show up and say the appropriate things. I don't typically say things with the vigor this would need to be described accurately.


  • Trolleybus Mechanic

    @Magus said in Can't click the horizontal scrollbar in a code block if you're not at the bottom of it:

    The fact that themes can break this is, well... maybe blakey will show up and say the appropriate things. I don't typically say things with the vigor this would need to be described accurately.

    No repro on Firefox 22 (EAT SHIT YOU UPGRADED BROKEN BROWSERS)

    But I'm not surprised it's happening, give the NodeBB dev's utter fucking lack of understanding of how HTML padding works RED BOOB (text goes offscreen)