Consider the .svg page with the following markup: [[ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g writing-mode="vertical-lr"> <text id="text" font-size="50" x="50" y="50" style="-webkit-user-modify: read-write" tabindex="0">Hello</text> </g> <script> window.getSelection().setBaseAndExtent(document.getElementById('text').firstChild, 0, document.getElementById('text').firstChild, 0); </script> </svg> ]] Open the page. You should see a horizontal caret before the 'h'. On iOS I see a vertical caret to the left of the 'h' and on Mac I see a horizontal caret only on first load between 'l' and 'l'.
<rdar://problem/62212006>
I am able to reproduce this bug in Safari 15.5 on macOS 12.4 and Safari Technical Preview 148 (based on described of caret showing up on first load between "l" vertically. I also changed the test case into following JSFiddle - https://jsfiddle.net/gcmr2s1p/show On other browsers, Chrome Canary 105 does not show caret upon selection and just show selection border (also no weird horizontal block like Safari to shape like "L" of Tetris game) while Firefox Nightly 104 does not show selection border unless if I select all text. Thanks!