У меня есть некоторые элементы навигации, расположенные с помощью transform: rotate()
и box-shadow
. Когда вы наводите на них курсор, они немного «выскакивают», показывая, что вы можете щелкнуть по ним. В Chrome и Safari (указывая, что это проблема вебкита), когда вы наводите курсор на некоторые элементы навигации, тени блоков выходят из строя и закрывают части других случайных элементов. Он отлично работает в Firefox.
Я сделал jsfiddle, изображающий проблему настолько просто, насколько я мог понять, как:
Наведите указатель мыши на один или два элемента, а затем из них, и вы увидите проблему в действии.
На сайте, над которым я работаю, есть проблема:
http://temp.go-for-english.com/
(URL скоро изменится на http://www.go-for-english.com, если это один не работает)
Если кто-нибудь может найти обходной путь, который все еще использует CSS3, чтобы он выглядел нормально (может быть, снова установите z-индекс при наведении курсора или какое-то другое странное обходное решение, в котором я не уверен), я был бы очень признателен: ) Я бы действительно предпочел не прибегать к изображениям :(
ОБНОВИТЬ:
Мне сообщили, что это выглядит нормально в Windows Chrome =\ Я использую Mac OSX 10.6, вот скриншот поведения, которое я вижу:
http://s9.photobucket.com/albums/a74/nZifnab/?action=view¤t=Screenshot2012-01-19at13205PM.png
Мой клиент также указал на проблему, потому что он использует Safari.