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>
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.
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!
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.