Applying css class with webkit transform does not work in Safari or Chrome

Question

I'm applying this css class:

.turn90{
-moz-transform: rotate(90deg);  /* FF3.5+ */
-o-transform: rotate(90deg);  /* Opera 10.5 */
-webkit-transform: rotate(90deg);  /* Saf3.1+, Chrome */
filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=1);  /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; /* IE8 */
}

via:

document.getElementById("advancedsearchtoggle").className += " turn90"; 

It works sufficiently in Firefox and Opera, but not in Safari or Chrome. (Haven't tried IE yet)

What am I doing wrong?

The Complete JavaScript function:

    var expanded=0;
    function searchparts(n)
    {
        if(expanded == 0){
            document.getElementById('search2').style.visibility = 'visible'; 
            document.getElementById('search3').style.visibility = 'visible'; 
            document.getElementById('search2').style.display = 'block'; 
            document.getElementById('search3').style.display = 'block'; 
            //window.scrollTo(0,findPos(document.getElementById('search'+n))-60);
            document.getElementById("advancedsearchtoggle").className += " turn90"; 
            document.getElementById('advancedsearchtoggle').style['-webkit-transform'] = 'rotate(90deg)';

            expanded = 1;   
        }else if(expanded == 1){
            document.getElementById('search2').style.visibility = 'collapse'; 
            document.getElementById('search3').style.visibility = 'collapse'; 
            document.getElementById('search2').style.display = 'none'; 
            document.getElementById('search3').style.display = 'none';
            window.scrollTo(0,findPos(document.getElementById('search1'))-60);
            document.getElementById("advancedsearchtoggle").className = " ";    
            document.getElementById('advancedsearchtoggle').style.webkitTransform = 'rotate(-90deg)'; 

            expanded = 0;   
        }
    }

This is the HTML that triggers the javascript:

<a class="plain" onclick="searchparts(2);" style="margin-right:20px;"><span style="text-decoration:underline;">Erweiterte Suche</span> <span id="advancedsearchtoggle" style="text-decoration:none;">&raquo;</span></a>

As you can see, even when putting

document.getElementById('advancedsearchtoggle').style['-webkit-transform'] = 'rotate(90deg)';

directly into the javascript, it doesn't work. When I inspect the "advancedsearchtoggle", I can see that the class get's applied correctly (and any other css I put into the class). Just the rotate doesn't seem to work in Safari & Chrome.

Solution 1

I think Webkit just doesn't support rotation on < span > tags yet. Remember, vendor-prefix CSS are called "experimental" for a reason.

It does seem to support rotation on tags like div, p, or h1, but I noticed that when I first tried doing this, the symbol disappeared because you need to define a height and width large enough so that the rotated element will fit inside.

For example, you can change the span tag to this:

<p id="advancedsearchtoggle" style="width: 10px; height: 10px; text-decoration:none;">&raquo;</p>

which works to some extent, but it may be unpredictable if you don't know the dimensions of the text being rotated.

You might be able to find another HTML text tag that rotates properly in Webkit, or do some javascript to determine the height and width of the text you need to rotate...

Solution 2

webkit does not support transforms on inline elements yet, just block/boxed elements, although the working draft from the W3C calls for transforms to work on both block and inline elements.

You can convert an inline element to a block element by using display: inline-block

Solution 3

Just for posterity purposes: webkit seems to apply rotation to elements set to display: inline-block.