Text not selectable in <pre> overflow-x: auto in some circumstances

• Component: HTML Editing
• Status: NEW ---

[Jeff Johnson]

Overview: In some circumstances, the text is not selectable inside a <pre> element with style overflow-x: auto. This happens when the page is wide enough that the scroller does not appear.

Steps to Reproduce:
1. In System Preferences, General pane, enable Show scroll bars: Always
2. In Safari, View menu, select Show Tab Bar
3. Open https://lapcatsoftware.com/articles/DerivedData.html
4. Slowly horizontally resize the window until the first <pre> element containing "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/Support/lsregister" no longer shows the horizontal scrollbar.
5. Make sure the page and vertical scrollbar is scrolled to the top
6. Try to select "CoreServices.framework" inside the <pre>

Actual Results: The text can't be selected.

Expected Results: The text can be selected.

Build Date & Hardware: Safari 14.0.3 (16610.4.3.1.4), macOS 11.2 (20D64), Mac mini (M1, 2020)

Additional Builds and Platforms: I can also reproduce in Safari Technology Preview 119, and also on an Intel MacBook Pro. I can only reproduce on macOS Big Sur, not on Catalina or Mojave.

Additional Information: The bug depends on the exact circumstances described above. Strangely, it depends on Show Tab Bar in Safari and doesn't happen when the tab bar is not showing. It also depends on the System Preferences scroll behavior. And it depends not only on the width of the page but also the vertical scroll position: if you scroll down a bit on the page, then the bug doesn't occur.

[Radar WebKit Bug Importer]

<rdar://problem/74239286>