Переключение фона на прозрачность при прокрутке в браузерах WebKit

Я работаю над созданием сайта с фиксированной навигацией. У меня есть панель навигации, закрепленная в верхней части экрана, используя абсолютное позиционирование. CSS выглядит следующим образом:Переключение фона на прозрачность при прокрутке в браузерах WebKit

.navbar { 
    background-color: #1f1f1f 
    top: 0px; 
    position: fixed; 
    width: 100%; 
}

А вот мой HTML:

<header class="navbar">...</header>

Это должно быть довольно просто, но по какой-то причине, я вижу на фоне навигационной мерцанием между #1f1f1f и что Я бы назвал просто transparent.

Я могу получить положение прокрутки до точки, где цвет фона прозрачный. В этот момент, когда я проверяю элемент в инспекторе WebKit, ожидаемый стиль есть. A background-color#1f1f1f и в основном все остальное, о чем я упоминал выше.

Я могу включить и выключить свойство background-color в инспекторе, и это, как правило, заставит фон вернуться к норме.

И, наконец, это похоже на проблему с браузерами на базе WebKit. Я могу воспроизвести проблему в Chrome и Opera, но не в Firefox или Internet Explorer. Я также, похоже, не могу воспроизвести это в Safari, по крайней мере, не в версии 7.0 (9537.71). Я также использую Startup Design Framework, и на веб-сайте есть видео в фоновом режиме под содержимым <div>, похожее на эту демонстрационную страницу. Может ли это быть причиной какой-то ошибки в рендеринге?

Любая помощь была бы принята с благодарностью. Спасибо!

Дополнительная информация: я удалил фоновое видео <div> со страницы, и это, казалось, решить проблему полностью. Однако это не идеальное решение. Есть ли какие-либо известные проблемы с фоновыми видео?

источник

2014-01-20 Jesse Dunlap

Трудно, чтобы помочь вам, не зная подробностей о фоновым видео и т.д., одна самая очевидная вещь, которую я могу видеть, глядя на конструкторского Framework Startup вы Размещенное: .Visible { непрозрачности: 1! Важно; } – JackArbiter

Спасибо JackArbiter. Я понимаю, что это немного смутный вопрос. К сожалению, мне немного сложно дать более подробную информацию, так как сайт довольно сложный. Насколько я знаю, мы используем очень похожую структуру для демонстрационного сайта Startup Framework. Я думаю, мой вопрос в том, есть ли какие-либо известные ошибки в версии Chrome WebKit, которые вызовут проблему, которую я вижу. Я ценю, что вы нашли время ответить. Не могли бы вы немного рассказать о '' .visible {opacity: 1! Important} '', который вы нашли? Я не могу на самом деле найти этот бит в нашей локальной копии CSS, но это кажется важным. –

На самом деле, глядя на это снова, это css для меньших элементов с видимым классом. Фоновое видео имеет непрозрачность: 0,7; но я думаю, что это уменьшить непрозрачность, а не увеличивать ее. Если вы посмотрите на ссылку, которую вы предоставили в Chrome, и воспользуйтесь консолью инструментов разработчика (f12), вы можете выбрать раздел видео и его детей и посмотреть, есть ли какие-либо различия между их css и css вашего сайта. Также обратите внимание, что они предоставляют видео в различных форматах, хотя это не имеет значения, пока vid - mp4, webm или ogg, поскольку Chrome поддерживает все 3 из них. – JackArbiter

Вы должны попробовать пару разных вещей. Сначала попробуйте штабелирования элемент с Z-индекс:

z-index: 1000000; /* max: 2147483647 */

Далее, вы можете попробовать и сила аппаратное ускорение в вашем меню. Браузер создаст новые уровни рендеринга для вашего меню, которые могут предотвратить мерцание.

-webkit-transform: translate3d(0, 0, 0); 
-moz-transform: translate3d(0, 0, 0); 
-ms-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0);

И, наконец, если ваш элемент больше, чем экран (даже на один пиксель в любом направлении), это может вызвать мерцание во время прокрутки на некоторых устройствах. Попробуйте добавить следующее:

-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
-ms-backface-visibility: hidden; 
backface-visibility: hidden;

источник

2014-01-28 11:05:57

Спасибо, Райан! Эти предложения определенно помогли, и мне очень нравится, как вы объяснили, что все делает. Я ценю это! –

попробовать это:

.navbar { 
position: fixed; 
right: 0; 
left: 0; 
z-index: 1030; 
margin-bottom: 0; 
background-color: #1f1f1f 
}

источник

2014-01-20 21:55:47 wpdaniel

Будет хорошо, если вы объясните OP, почему это ответ. – Manhattan

Извините, я допустил ошибку в своем оригинальном посте. Очевидным недостатком является то, что я использовал '' position: absolute''. Я фактически использовал '' position: fixed'', как описано здесь. Боюсь, что другие изменения не повлияли на проблему. –

Экспериментируйте с этим более подробно, см. Раздел «Дополнительная информация» выше. Похоже, фоновое видео является виновником. –

.navbar { 
    left: 0; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    background-color: #1f1f1f; 
    z-index: 1030; 
}

источник

2014-01-23 14:02:24 Ram

Будет хорошо, если вы объясните OP, почему это ответ. – KyleMit

Помимо разного форматирования и отсутствия «margin-bottom: 0'', это выглядит в основном тем же самым ответом, что и kamuken выше, что не помогло решить проблему. Я что-то упускаю? –

Недавно у меня была такая же проблема с WebKit браузеров. Все, что вам нужно сделать, это добавить это в вашем классе .navbar в CSS и посмотреть, если он работает:

backface-visibility:visible; -webkit-backface-visibility: visible; -webkit-transform: translateZ(0);

источник

2014-01-27 16:39:47

-1

Вы пробовали использовать Firebug для отладки проблемы. Я бы предложил вам использовать firebug для отладки этой проблемы.

Это поможет вам в проблеме, связанной с css.

Наслаждайтесь !!!

источник

2014-01-28 09:59:35 Ironic

Я на самом деле не смотрел.Проблема на самом деле не происходит в Firefox, поэтому в Firebug это может быть немного сложно отладить. Я использую Webkit Inspector в Chrome. В любом случае, спасибо за предложение. –

Переключение фона на прозрачность при прокрутке в браузерах WebKit

ответ

Смежные вопросы