Selecting text in element with box-shadow goes too low

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Wander]

Selecting text in a rotated element normally works fine, but as soon as I give it a bigger shadow, selecting the top lines won't work anymore.
In the code below, changing the 30px in 20px fixes the problem.
I get the bug in Safari 4 public beta (webkit 528.16) and Chromium build 12245 (webkit 530.4)

<style>
.a{
	-webkit-box-shadow:10px 10px 30px #000;
	-webkit-transform:rotate(10deg);
	margin:20%;
}
</style>
<div class="a">Just some text<br/>Just some text<br/>Just some text<br/>Just some text</div>

[Wander]

I think I made an error when trying without rotation earlier, now I see it doesnt have anything to do with the rotating, but only with the shadow.

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.6 on macOS 12.5 and I have changed the test case slightly (removing rotation) and also in following JSFiddle:

Link - https://jsfiddle.net/ek1m9678/show

Upon text selection - the selection goes beyond border <div> and show across whole viewport, while other browser (Chrome Canary 105 and Firefox Nightly 104) restrict text selection into <div> only.

It might be duplicate bug since I recall testing similar bug before. Thanks!

[Ryosuke Niwa]

Even though the selection rendering differs here because Safari renders selection gap, we can still select the top line so the original bug being reported here has been fixed.