Blurry Nav Bar при прокрутке

Question

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

http://www.clinicajardinsbenfica.pt/new.html

Заранее спасибо!

Редактировать: похоже, проблема связана только с хромом. не знаю, почему.

edit2: вот videoscreenshot с вопросом http://www.screenr.com/mVEH

Answer 1

У Chrome есть некоторые проблемы с фиксированными элементами.

Вы должны начать добавив follwing в свой фиксированный элемент (ы):

-webkit-backface-visibility: hidden; 

-webkit-transform: translateZ(0) scale(1.0, 1.0); 

translateZ(0) может быть использован, чтобы исправить многочисленные Ошибок Chrome.

Если это не работает, убедитесь, что в контейнере фиксированного элемента нет элементов, которые имеют opacity из 0. Если это так убедитесь, что они также имеют display:none;

Если вы все еще не получить результат, убедитесь, что вы имеете следующее:

html,body { 
    height:100%; 
    overflow:auto 
} 

Существует еще остается открытым вопрос ошибка в chromium.

Answer 2

Если вы говорите о том, что сломанный фон идет ниже этой пунктирной границы добавьте ниже заданного CSS, чтобы исправить

#nav li a { 
    background-attachment: scroll; 
    background-clip: border-box; 
    background-color: rgba(0, 0, 0, 0); 
    background-image: none !important; 
    background-origin: padding-box; 
    background-position: 0 0; 
    background-repeat: repeat-x; 
    background-size: auto auto; 
    float: left; 
    font-family: GothamHTF-Medium; 
    font-size: 17px; 
    padding: 22px 0.85em 16px; 
} 

Является ли это то, что вы находясь в поиске?

Answer 3

Добавьте этот css в свои навигационные стили.

#nav{ 
-webkit-backface-visibility: hidden; 
}