CSS cross browser issue - rotate not working on Safari and Ipad and Iphones

Question

I want to have vertical text and am using the Transform property to do this. However I cannot get it to work on on Safari and iphones / IPads.

Can anyone help?

The page is: http://www.hydrossolutions.com/

h3.aviaccordion-title {
        -webkit-transform-style: preserve-3d;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

-webkit-transform: translateY(90deg);
-webkit-transform-origin:left bottom 0;

-moz-transform: translateY(90deg);
-moz-transform-origin: left bottom 0;

-ms-transform: translateY(90deg);
-ms-transform-origin:left bottom 0;

-o-transform: translateY(90deg);

transform: translateY(90deg);
transform: rotate(90deg);
transform-origin: left bottom 0;

padding:0 !important;
margin:0 !Important;
white-space: nowrap !Important;
display: block;
}

possible duplicate of [Elements using CSS transitions do not appear on iPad/iPhone until inspected with Safari web inspector](http://stackoverflow.com/questions/21632400/elements-using-css-transitions-do-not-appear-on-ipad-iphone-until-inspected-with) — Alex, Sep 14 '15 at 11:41
I already tried the proposed solution on that post and it doesnt work for me. — LeeTee, Sep 14 '15 at 12:32

score 0 · Accepted Answer · answered Sep 15 '15 at 19:30

After lots and lots of searching I found that I needed to use: webkit-transform: rotate(90deg); instead of -webkit-transform: translateY(90deg);

 h3.aviaccordion-title {

        -webkit-transform-style: preserve-3d;
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

        -webkit-transform: translateY(90deg);
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin:left bottom;


        -moz-transform: translateY(90deg);
        -moz-transform-origin: left bottom;

        -ms-transform: translateY(90deg);
        -ms-transform-origin:left bottom;

        -o-transform: translateY(90deg);

        transform: translateY(90deg);
        transform: rotate(90deg);


        transform-origin: left bottom;

        padding:0 !important;
        margin:0 !Important;
        white-space: nowrap !Important;
        display: block;


    }

CSS cross browser issue - rotate not working on Safari and Ipad and Iphones

1 Answers1