CODEWITHSUNDEEP
mobilecssmobile-safari
Timothy Miller
Timothy Miller

Reputation: 2429

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 the 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!

Upvotes: 1

Views: 472

Answers (2)

Timothy Miller
Timothy Miller

Reputation: 2429

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!

Upvotes: 2

Kevin Ji
Kevin Ji

Reputation: 10499

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);

Upvotes: 0

Related Questions