It's reproduced in Safari 5.0.2 and Chrome 8.0.552.224 Run the following HTML snippet: <div style="float: left; border: solid 1px red"> <div style="overflow-x: hidden; overflow-y: scroll;" id="div1"> test </div> </div> <input type="button" value="click me" onclick="document.getElementById('div1').style.width = '50px'" /> Click the "click me" button. You'll see an extra spacing added to the right of scrollbar.
All the browsers show same behaviour. Doesnot seem to be a bug. Please confirm what behaviour you are expecting.
I am not able to reproduce original issue in Safari 16.1 and STP 159 while I do see the the spacing between red border container and button is larger than other browser (Chrome Canary 110 and Firefox Nightly 109), which might be just cosmetic theming difference and not something substantial. JSFiddle - https://jsfiddle.net/dgcmoy7a/show Just going to comment and add others to comment and confirm my testing. Thanks!
One needs to change macOS system preferences to always show scrollbars to follow the steps to reproduce. But even so, there is no extra spacing added in Safari or other macOS browsers. Didn't attempt to verify on Windows though.