Bug 213851 - Container in RTL mode shows undesired space on right if `scrollLeft` is accessed
Summary: Container in RTL mode shows undesired space on right if `scrollLeft` is accessed
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari 12
Hardware: Unspecified macOS 10.14
: P3 Minor
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-07-01 09:57 PDT by Paul Gschwendtner
Modified: 2020-07-01 11:10 PDT (History)
4 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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>