Question 233485 in CSS Question posted in
Some basic documentation can be found here.

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.

Tags:

2

Answers


  1. 0

    Experiencing a similar issue in safari and ios

    button {
writing-mode: vertical-lr;
}

    [Chrome][1]
    [1]: https://i.stack.imgur.com/qoHbr.png

    [Safari][2]
    [2]: https://i.stack.imgur.com/c3pNW.png

    Login or Signup to reply.
  2. 0

    Japanese user forum suggested using something other than a button to be the button. I decided to do that:

    writing-mode: vertical-lr; がbuttonタグにだけ効かない。。

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search