Bug 213851

Summary: Container in RTL mode shows undesired space on right if `scrollLeft` is accessed
Product: WebKit Reporter: Paul Gschwendtner <paulgschwendtner>
Component: ScrollingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Minor CC: bfulgham, simon.fraser, webkit-bug-importer, zalan
Priority: P3 Keywords: InRadar
Version: Safari 12   
Hardware: Unspecified   
OS: macOS 10.14   

Description Paul Gschwendtner 2020-07-01 09:57:55 PDT
Assuming a user has scrollbars set to `Always Show up` (as per macOS System preferences).

Consider a `div` set to `dir=rtl` with content that expands the containers width and a vertical scroll bar shows
purely because of the displayed horizontal scroll bar.

If the div/scrollable container is inserted dynamically through `document.appendChild` after `container.scrollLeft` has
been accessed in any way, undesired spacing is displayed on the right. The space seems to be of 15px and represents
the usual LTR vertical scrollbar.

Note for clarity: This only seems to surface when the container is inserted dynamically, and if `scrollLeft` is accessed. An
requirement for reproduction also seems that the vertical scroll bar is caused by the horizontal scroll bar showing up.

A small reproduction can be found here: https://codepen.io/DevVersion/pen/Rwrjqor:

 1. Open the CodePen in Safari macOS
 2. Make sure that `Scroll bars` are always enabled as per MacOS General preferences
 3. Observe the space on the right side (while the scroll bar is on the left)
Comment 1 Radar WebKit Bug Importer 2020-07-01 11:10:14 PDT
<rdar://problem/64994730>