Mobile Safari weird semi-transparent box

Okay, so I've got a couple of headers with links in them. Like this:

<h1><a href="">text</a></h1>

And then I rotate them using CSS3, like this:

-webkit-transform: rotate(-90deg) translate(-63px, -117.5px);
-moz-transform: rotate(-90deg) translate(-63px, -117.5px);

I also use the translate prop. to position them where I want (rather than absolute positioning), for backwards compatibility purposes.

Now it looks perfect on Firefox or Chrome, but when I look at it on Mobile Safari it has these weird semi-transparent boxes going from the right of th开发者_StackOverflow社区e container all the way off screen.

Any thoughts off hand? I can post examples if I have to, but before I do does anyone know what it could be? Thanks!

---

I solved it. For future reference, the problem was a bug in Mobile Safari. I had a 'text-decoration:underline;' on the link that I had rotated, and for some reason Safari stretched that out and made it partially transparent. No idea why it did this, but removing the text underline solved the problem. Thanks for your thoughts, everybody!

---

The problem is that -webkit-transform and -moz-transform are browser-specific, and do not work with other browsers (i.e. Opera, IE, etc.). Reference: CSS3 transform from MDN. Safari for desktop should be working with -webkit-transform; the status on iOS Safari is unknown.

The following code should work on more browsers (i.e. it should be more portable):

transform: rotate(-90deg) translate(-63px, -117.5px);
-webkit-transform: rotate(-90deg) translate(-63px, -117.5px); 
-moz-transform: rotate(-90deg) translate(-63px, -117.5px);
-o-transform: rotate(-90deg) translate(-63px, -117.5px);
-ms-transform: rotate(-90deg) translate(-63px, -117.5px);