HTML 위치 고정 오류

Question

내 대학 프로젝트 용 웹 사이트를 만들고 Chrome에서 내 사이트를 볼 때 약간의 문제가 발생했습니다. 일반적으로 호환성을 위해 좋기 때문에 아마 바보가됩니다. 나는 머리글 표시 줄과 'controls_container'를 두 위치로 설정했습니다. 페이지 아래로 스크롤 할 때보기 위해 고정되었지만 Chrome에서는 고정되어 있지 않지만 IE, Safari 및 Firefox에서는 의도 한대로 작동합니다. 이것은 이후

(왼쪽 이동 경로 탐색 버튼을 마찬가지로, 헤더 바 스크롤까지) : 이 크롬에서 아래로 스크롤 이후 :

이

크롬에서 본 페이지의 선두입니다 IE에서 스크롤 :

동영상에서 내 색인 비디오를 제거 할 수 없습니다. 내 배경 비디오입니다. 여기 내 사이트에 대한 링크입니다, 어떤 도움을 많이 주시면 감사하겠습니다! http://conet.co.uk/p_c_h/explore.html

Answer 1

당신이 언급 한 요소를 참조하십시오. 여기서 문제는 배경 비디오를 사용할 때 이상하게 작동하는 렌더링에 있습니다.

고정 된 요소의 스타일에 backface-visibility: hidden; 또는 transform: translateZ(0);을 추가하려고하면 문제가 해결됩니다. 이러한 속성은 고정 된 요소를 별도의 렌더링 레이어 (스태킹 컨텍스트)에 배치하고 브라우저가이를 올바르게 렌더링합니다.

Answer 2

Chrome에서 렌더링 문제가있는 것 같습니다. "banner_video"노드를 삭제하면 모든 것이 예상대로 작동합니다. 헤더 바 .controls_container - - 실제로 고정되어

는 https://code.google.com/p/chromium/issues/detail?id=402211