Мобильная Сафари странная полупрозрачная коробка - PullRequest
Новая
       26

Мобильная Сафари странная полупрозрачная коробка

1 голос
/ 07 октября 2011

Хорошо, у меня есть пара заголовков со ссылками в них.Например: 

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

И затем я поворачиваю их с помощью CSS3, например: 

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

Я также использую опору перевода.чтобы расположить их там, где я хочу (а не абсолютное позиционирование), для целей обратной совместимости.

Теперь это выглядит идеально в Firefox или Chrome, но когда я смотрю на него в Mobile Safari, у него есть эти странные полупрозрачные рамкиидти от правой стороны контейнера до конца экрана.

Есть какие-нибудь мысли с рук?Я могу опубликовать примеры, если нужно, но кто-нибудь знает, что это может быть?Спасибо!

Ответы [ 2 ]

2 голосов
/ 08 октября 2011

Я решил это. Для дальнейшего использования проблема заключалась в ошибке в Mobile Safari. У меня было «текстовое оформление: подчеркивание;» по ссылке, которую я повернул, и по какой-то причине Safari растянул это и сделал его частично прозрачным. Не знаю, почему он это сделал, но удаление подчеркивания текста решило проблему. Всем спасибо за мысли!

0 голосов
/ 07 октября 2011

Проблема в том, что -webkit-transform и -moz-transform зависят от браузера и не работают с другими браузерами (например, Opera, IE и т. Д.).Справка: CSS3 transform от MDN .Safari для рабочего стола должен работать с -webkit-transform;статус в iOS Safari неизвестен.

Следующий код должен работать на большем количестве браузеров (т. е. он должен быть более переносимым): 

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