Webkit box-shadow gitches поверх других элементов - PullRequest
Новая
       65

Webkit box-shadow gitches поверх других элементов

0 голосов
/ 20 января 2012

У меня есть некоторые навигационные элементы, расположенные с transform: rotate() и box-shadow. Когда вы наводите на них курсор, они немного выскакивают, показывая, что вы можете нажать на них. В Chrome и Safari (что указывает на проблему с веб-набором), когда вы наводите курсор мыши на некоторые элементы навигации, тени ячеек становятся бесполезными и скрывают части других случайных элементов. В Firefox работает нормально.

Я сделал jsfiddle, описывающий проблему так просто, как я мог понять, как:

http://jsfiddle.net/Q39eJ/1/

Наведите указатель мыши на один из двух элементов, а затем на них, и вы увидите проблему в действии.

На сайте, над которым я работаю, есть проблема:

http://temp.go -for-english.com /

(URL скоро изменится на http://www.go -for-english.com , если этот не работает)

Если кто-нибудь сможет найти обходной путь, который все еще использует CSS3, чтобы он выглядел нормально (возможно, снова установите z-index при наведении курсора или какой-то другой странный обходной путь, в котором я не уверен), я бы очень хотел цените это :) Я действительно предпочел бы не прибегать к изображениям: (

UPDATE:

Мне сообщили, что на Windows Chrome это выглядит нормально = \ Я использую Mac OSX 10.6, вот скриншот поведения, которое я вижу:

http://s9.photobucket.com/albums/a74/nZifnab/?action=view&current=Screenshot2012-01-19at13205PM.png

Мой клиент также указал на проблему, потому что он использует Safari.

1 Ответ

3 голосов
/ 21 января 2012

Я обнаружил, что в основном работает.Нашел вопрос об стеке потока: Как заставить WebKit перерисовать / перерисовать для распространения изменений стиля? , связанных с форсированием перерисовки элементов с использованием javascript.Поэтому я обновил свою скрипку с помощью этого кода, чтобы принудительно перекрасить элементы с тенями: 

$(function() {
    $('.top-nav a').hover(function() {
        redrawMe($('.top-nav a'));
    })
});

function redrawMe(obj) {
    obj.hide();
    obj.each(function() {
        this.offsetHeight;
    });
    obj.show();
}

Я попытался перерисовать только элемент, который находился redrawMe($(this));, но он не работал, когда любойиз них зависает, мне нужно перерисовать их всех.Похоже, что в основном делают свое дело, но все еще есть некоторые более темные тени, которые появляются в трещинах между каждым элементом.Я чувствую, что это приемлемо и едва заметно.jsfiddle с моим доказательством концепции:

http://jsfiddle.net/nzifnab/Q39eJ/4/

Еще не обновили этот живой сайт с ним, но скоро.

Если кому-то удастся найтиспособ сделать так, чтобы даже тени между элементами исчезали, я приму ваш ответ:)

Опять же, это может происходить только в MacOS X как в Chrome, так и в Safari.

...