In Chrome for Mac OSX the scroll bar overflows the last line of text.


Mac OSX 10.7.5, Google Chrome Version 23.0.1271.64. In Safari it works great!

  • Looks like a bug that needs to be reported to the browser. If SE attempted to fix it, there would just be extra space between the text and edge of the box on every other browser.
    – animuson StaffMod
    Commented Nov 13, 2012 at 14:33
  • I cannot reproduce this (on the same browser and OS versions). Can you provide us with a link to a specific post where you see this? Commented Nov 13, 2012 at 14:43
  • I can't reproduce this either; identical settings re: OS X/Chrome. Commented Nov 13, 2012 at 14:47
  • Sorry for not responding, didn't have email alerts on. It was on the page link however it looks like it's fixed now
    – trondkla
    Commented Dec 17, 2013 at 13:20
  • 3
    This is still happening in January 2019. The selected answer still works. As a bonus this fixes both horizontal and vertical scrollbars overflowing over content.
    – Dan
    Commented Jan 14, 2019 at 19:49
  • Very strange: it is not working on my machine (MacOs Mojave/ Chrome73 beta) but it is working on browserstack with the same configuration.
    – sgotre
    Commented Feb 15, 2019 at 14:22

2 Answers 2


(This answer originally from this dupe.)

While this is a usability problem with OS X, it's not as if a fix on the SO side would be the first time that a site went out of its way to work around the quirks of a popular OS/browser.

Moreover, this doesn't always happen, there's something more going on than just "OS X messes up scrollbars."

The options for scrollbar display are:

  • Automatically based on mouse or trackpad
  • When scrolling
  • Always

Using Always (unsurprisingly) fixes this problem by adding extra padding and using a small scrollbar style: Always

With either Automatically based on mouse or trackpad1 or When scrolling the scrollbar is sometimes okay: Automatic or when scrolling okay (Less padding, but still plenty usable. The scrollbar is actually slightly less tall than with Always.)

But sometimes bad: Automatic or when scrolling bad

I got the above two different behaviors simply by moving the mouse out so that the scrollbars disappeared and then moving it back in. No page reload, no settings changes, just mouse movement. Sometimes it picked the small scrollbar style, sometimes large. The inconsistent behavior's the same in both Safari and Chrome.

Something weird is going on.

1 I'm using the built-in trackpad, maybe behavior's different with a mouse. The "Help" for this preference unhelpfully says essentially "Go try it and see."


I can only obtain that result when scroll bars are not always shown. When I set the scroll bars to always be shown, they don't cover the code shown in the following snippet.

print this_is_a_long_function_name_nobody_will_ever_use_for_a_function_they_write_and_which_needs_to_be_used_from_other_users();

always visible

When I set them to automatically appear based on mouse or trackpad, this is what I see, when I hover the snippet.

visible basing on the mouse

I have taken the screenshot from Google Chrome, but I get the same with Safari.

Firefox always show the scroll bars, independently from the OS X General settings. Its output is the same I obtain with Google Chrome when OS X is told to always show the scroll bars.


  • 4
    Plugging my own post, but relevant: it is possible for sites to override this behaviour, even on a per-element basis. (Though I haven't much tested the effect on WebKit browsers without the option enabled.) My preference would be to disable it for code blocks (where it is almost always annoying) but leave it available for the page as a whole (where I somewhat like it). But that's not respecting the browser, so I can understand if people wouldn't like that.
    – Jeremy
    Commented Nov 13, 2012 at 17:16

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .