CSS глюки в браузере Chrome - PullRequest
Новая
       8

CSS глюки в браузере Chrome

0 голосов
/ 05 мая 2018

Я пытаюсь отладить CSS на моем сайте, но не могу найти исправление. Есть только две проблемы в браузере Chrome: 1) Анимация размытия начинается и заканчивается мерцанием. 2) Нижняя прокрутка сетки видео частично покрыта прозрачным фоном при наведении

Я использую jQuery для размытия всего, кроме ввода для поиска 

$(".moviesearch").focus(function() {
    $('.hero > *:not(#searchbox), .right-column, .sky, #universe, #limbo').css({
        'pointer-events': 'none',
        filter: 'blur(30px)',
        webkitFilter: 'blur(30px)',
        mozFilter: 'blur(30px)',
        oFilter: 'blur(30px)',
        msFilter: 'blur(30px)',
        WebkitTransition: 'all 0.5s ease-in-out',
        MozTransition: 'all 0.5s ease-in-out',
        MsTransition: 'all 0.5s ease-in-out',
        OTransition: 'all 0.5s ease-in-out',
        transition: 'all 0.5s ease-in-out',
        '-webkit-transform': 'translateZ(0)',
        '-moz-transform': 'translateZ(0)',
        '-ms-transform': 'translateZ(0)',
        '-o-transform': 'translateZ(0)',
        'transform': 'translateZ(0)',
        '-webkit-backface-visibility': 'hidden',
        '-moz-backface-visibility': 'hidden',
        '-ms-backface-visibility': 'hidden',
        'backface-visibility': 'hidden',
        '-webkit-perspective': '1000',
        '-moz-perspective': '1000',
        '-ms-perspective': '1000',
        'perspective': '1000'
    });
});
$(".moviesearch").blur(function() {
    $('.hero > *:not(#searchbox), .right-column, #universe, #limbo').css({
        'pointer-events': 'auto',
        filter: 'blur(0px)',
        webkitFilter: 'blur(0px)',
        mozFilter: 'blur(0px)',
        oFilter: 'blur(0px)',
        msFilter: 'blur(0px)'
    });
});

Я пытался backface-visibility: hidden, но он не работает. Что касается второй проблемы, я не могу ничего попробовать, так как не могу понять проблему. Также я заметил, что, если я начинаю поиск на моем веб-сайте, и анимация размытия происходит с мерцанием, вторая проблема решается. Пожалуйста, скажите мне, почему это происходит и как это предотвратить. Вот мой ВЕБ-САЙТ ДЛЯ ПРОВЕРКИ Спасибо!

...