WebKit 브라우저에서 스크롤 할 때 배경색이 투명하게 전환됩니다.

Question

고정 탐색 웹 사이트를 만들기 위해 노력하고 있습니다. 절대 탐색을 사용하여 화면 상단에 고정 된 탐색 모음이 있습니다. CSS는이 같은 같습니다

.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에서는 문제를 재현 할 수 없습니다. 나도 사파리에서 이것을 재현 할 수있는 것 같지 않다. 적어도 7.0 (9537.71) 나는 Startup Design Framework을 사용하고있다. 웹 사이트는 데모 페이지와 비슷한 내용의 배경에있는 비디오 <div>을 특징으로한다. 이것은 일종의 렌더링 결함을 유발할 수 있습니까?

도움을 주시면 감사하겠습니다. 고맙습니다!

더 많은 정보 : 나는 페이지에서 배경 비디오 <div>을 제거하고이 문제를 완전히 해결하기 위해 나타났다. 하지만 이것은 실제로 이상적인 해결책은 아닙니다. 배경 비디오에 알려진 문제가 있습니까?

Answer 1

몇 가지 다른 것을 시도해야합니다. 먼저 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; 

Answer 2

이 시도 :

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

Answer 3

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

Answer 4

는 최근 웹킷 브라우저와 같은 문제가 있었다. 당신이 할 일은 CSS에 .navbar 클래스에이를 추가하고 작동하는지 확인한다 :

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

Answer 5

당신이 문제를 디버깅하는 파이어 버그를 사용하는 것을 시도했다. 이 문제를 디버그하기 위해 방화 녀를 사용하는 것이 좋습니다.

CSS 관련 문제에 도움이됩니다.

즐기십시오!