Bug 191922 – Changing a character in a relative position span to another one of the same width doesn't update the display

• Component: DOM
• Status: RESOLVED CONFIGURATION CHANGED

Created attachment 355505 [details]
File that exhibits the bug

For some reason, the layout of the attached html file, with a `position: fixed` div followed by a `position: relative` span causes Safari to not notice if you change the contents of the span to another character of the same width.

To reproduce:
- Load the attached html file or use the link at the bottom of this post

Expected result:
The JavaScript should change the 一 to a 二 100ms after the page loads

Actual result:
The character is changed in the DOM, which you can see if you have the web inspector open, but the rendered character stays 一 until you either try to highlight character or resize the browser window.

Data url for easy testing:
data:text/html,%3Chtml%3E%0A%3Chead%3E%3Ctitle%3ESafari%20Bug%20Test%3C%2Ftitle%3E%3Cmeta%20charset%3D%22utf%2D8%22%3E%3C%2Fhead%3E%0A%3Cbody%3E%0A%09%3Cdiv%20style%3D%22position%3Afixed%3B%22%3E%2E%3C%2Fdiv%3E%0A%09%3Cspan%20style%3D%22position%3Arelative%3B%22%20id%3D%22change%22%3E%E4%B8%80%3C%2Fspan%3E%0A%09%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%09%09window%2Eonload%20%3D%20function%28%29%20%7B%0A%09%09%09setTimeout%28function%28%29%20%7B%0A%09%09%09%09document%2EgetElementById%28%22change%22%29%2EchildNodes%5B0%5D%2EtextContent%20%3D%20%22%E4%BA%8C%22%3B%0A%09%09%09%7D%2C%20100%29%3B%0A%09%09%7D%3B%0A%09%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E

[Brent Fulgham]

Chrome, Safari, and Firefox produce the same output in 2022.