Search code examples
csssafari

Safari issue with writing-mode CSS property

I have an issue with using the writing-mode CSS property on some button elements. On Chrome it works fine, it looks like this:

enter image description here

This is the code:

button {
height: auto;
position: fixed;
right: 0px;
border-radius: 0 12px 12px 0;
padding: 12px 8px;
z-index: 50;
writing-mode: vertical-lr;
rotate: 180deg;
}

On Safari the buttons look like this:

enter image description here

I had a look in Safari dev tools, in the Styles tab the writing-mode: vertical-lr is applied but if I look in Computed tab the writing-mode: horizontal-tb appears. Did anyone had this issue before? Thank you

I tried setting different values for writing-mode in Safari but none of it applies.

Solution

  • The only way I was able to fix the buttons, was to stop using: writing-mode: vertical-lr; rotate: 180deg; and use this instead: transform: rotate(-90deg); transform-origin: bottom right;

    No issues on safari after this