Highlighted text shifts other text on the page

[StarScape]

I've only seen this on iOS on reader.ttsu.app. I'm not sure if this is something we can actually prevent, or just a slight rendering error on the part of the browser.

Notice the text below もない shifting slightly:

ScreenRecording_11-16-2025.16-59-13_1.MP4

Same thing with the text below もどおり:

ScreenRecording_10-16-2025.16-27-53_1.MP4

[birtles]

Hmm, that's a bit odd. I thought we'd be using the highlight API there so you'd see a yellow highlight. Did you change the highlight settings to use blue?

If we're using the highlight API and the text is shifting it's probably a browser bug. If we're not using the highlight API (old version of Safari?) then it's not so surprising that selecting the text would cause a shift.

[StarScape]

I did set my highlight color to blue yeah (in the interest of thoroughness I changed it back to yellow and I still see the problem). I am on the latest version of Safari.

[birtles]

Great, thanks for confirming that. I'm pretty sure that's a WebKit bug then since highlights after not supposed to affect layout: https://drafts.csswg.org/css-pseudo-4/#highlight-styling

Unless we're touching the content in some other way as well?

[StarScape]

Yeah, sounds like a WebKit bug. I'll double check that the highlight API is being used and it's not somehow accidentally using the fallback (which I think from your comment above is still in the 10ten code?), assuming not then I think we can safely close this.

[birtles]

Yeah, sounds like a WebKit bug. I'll double check that the highlight API is being used and it's not somehow accidentally using the fallback (which I think from your comment above is still in the 10ten code?), assuming not then I think we can safely close this.

Yes, we still have the selection code for older browsers and for places where we can't use the highlight API like SVG text.