Safari does not update when changing the HTML through Javascript. It uses the old HTML to determine the direction of the element. This is a problem when using :dir()
to apply different styles to RTL and LTR languages.
- Set the
dir
attribute of thehtml
element toltr
in the HTML file. - Create a script that changes the
dir
attribute of thehtml
element tortl
when the page is loaded. - Create a CSS file that applies different styles to an element based on the
dir
attribute. - Open the HTML file in Safari.
The element should be styled according to the dir
attribute of the html
element regardless of the initial value.
The element is styled according to the initial value of the dir
attribute of the html
element.
This works as expected in Chrome and Firefox. The bug is present in Safari 16.4+. I have not tested older versions.