How to deal in safari ios devices with css writing-mode?

user_12217336 0
Viewed 1823

I have a css class of vertical-text wherein this .vertical-text will make a text to be in vertical position. Everything is okay, but when I tried on my iphone, safari. It is not working. I don't know if safari browser issues or more on ios issues?

Here's the vertical-text class: 

.vertical-text {
    transform: rotate(180deg);
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: tb-lr;
    -moz-writing-mode: tb-lr;
    writing-mode: tb-lr;

    -ms-writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    writing-mode: vertical-lr;

    -ms-writing-mode: sideways-lr;
    -webkit-writing-mode: sideways-lr;
    -moz-writing-mode: sideways-lr;
    writing-mode: sideways-lr;
}

Here's my sample html:

<td class="{{ $step['color'] }}-pure w-10-p text-white" rowspan="4">
    <label class="vertical-text text-center font-weight-bold">STEP {{ $step['id']}}</label>
</td>

Here's the sample output in PC (google chrome)

enter image description here

responsive-design safari css html php
1 Answers

In case you're still needing an answer, I just figured out if you use transform on the inner contents of a table cell, the cell dimensions do not calculate properly in Safari iOS. Once I removed transform, the writing-mode worked fine. The outcome is your step labels will face outward instead of inward but at least the table doesn't blow up.

user_58751930
Related