Chrome에서 고정 요소가 사라짐

Chrome에서 고정 요소가 사라짐

---

내가 만든 웹 사이트를 스크롤 할 때 CSS 속성을 사용하면 position: fixed예상대로 페이지 맨 위에 탐색 막대가 유지됩니다.

그러나 Chrome에서는 탐색 모음의 링크를 사용하면 때때로 사라집니다. 일반적으로 클릭 한 항목은 계속 표시되지만 항상 그런 것은 아닙니다. 때때로 모든 것이 사라집니다. 마우스를 움직이면 요소의 일부가 뒤로 돌아가고 스크롤 휠이나 화살표 키를 사용하여 한 번만 클릭하면 요소가 다시 돌아옵니다. http://nikeplusphp.org 에서 (간헐적으로) 발생하는 것을 볼 수 있습니다 . 링크를 몇 번 클릭하여 확인해야 할 수도 있습니다.

나는 또한 Z- 색인과 가시성 / 디스플레이 유형을 가지고 놀아 보았지만 운이 없었다.

나는 우연히 이 질문 하지만 수정은 전혀 나를 위해 작동하지 않았다. IE와 Firefox가 잘 작동하므로 웹킷 문제인 것 같습니다.

이것은 알려진 문제입니까, 아니면 고정 된 요소를 계속 표시 할 수있는 수정 사항이 있습니까?

최신 정보:

top: 0;, 내가 시도한 요소에만 효과 bottom: 0;가 있으며 예상대로 작동합니다.

---

추가 -webkit-transform: translateZ(0)받는 position: fixed요소입니다. 이로 인해 Chrome은 하드웨어 가속을 사용하여 고정 된 요소를 지속적으로 페인트하고 이러한 기괴한 동작을 방지합니다.

이 https://bugs.chromium.org/p/chromium/issues/detail?id=288747에 대한 Chrome 버그를 만들었습니다 . 관심을 끌 수 있도록 별표를 표시하세요.

---

이것은 나를 위해 그것을 고칩니다.

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

---

내가 크롬과 같은 문제가 발생하고, 너무 많은 것 페이지 안에, 내가 (고정 위치 요소에 코드를 변환 다음을 추가하여 문제를 해결할 수 있었다에있을 때 발생하는 버그 것 같다 transform: translateZ(0);-webkit-transform: translateZ(0);) 세력 것을 브라우저가 하드웨어 가속을 사용하여 장치의 그래픽 처리 장치 (GPU)에 액세스하여 픽셀을 날리게합니다. 반면에 웹 응용 프로그램은 브라우저 컨텍스트에서 실행되므로 소프트웨어가 렌더링의 대부분 (전부는 아니지만)을 수행 할 수 있으므로 전환 성능이 떨어집니다. 그러나 웹이 따라 잡고 있으며 대부분의 브라우저 공급 업체는 이제 특정 CSS 규칙을 통해 그래픽 하드웨어 가속을 제공합니다.

-webkit-transform 사용 : translate3d (0,0,0); CSS 전환을 위해 GPU를 작동시켜 더 매끄럽게 만듭니다 (높은 FPS).

참고 : translate3d (0,0,0)은 보이는 것과 관련하여 아무 작업도 수행하지 않습니다. x, y 및 z 축에서 개체를 0px만큼 이동합니다. 하드웨어 가속을 강제하는 기술 일뿐입니다.

#element {
    position: fixed;
    background: white;
    border-bottom: 2px solid #eaeaea;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9994;
    height: 80px;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

---

위의 옵션은 제공된 솔루션 중 두 가지를 혼합 할 때까지 작동하지 않았습니다.

고정 요소에 다음을 추가하여 작동했습니다. 기본적으로 z-index도 필요했습니다.

-webkit-transform: translateZ(0);
z-index: 1000;

---

이것은 아직 해결되지 않은 웹킷 문제로, 이상하게도 #url 값을 사용하는 대신 JavaScript로 점프를 수행해도 문제가 발생하지 않습니다. 이 문제를 극복하기 위해 앵커 값을 가져와 해당 ID가있는 요소의 절대 위치를 찾아 그 위치로 이동하는 JavaScript 버전을 제공했습니다.

var elements = document.getElementsByTagName('a');
for(var i = 1; i < elements.length; i++) {
    elements[i].onclick = function() {
        var hash = this.hash.substr(1),
            elementTop = document.getElementById(hash).offsetTop;
        window.scrollTo(0, elementTop + 125);
        window.location.hash = '';
        return false;
    }
}

나는 이것을 더 구체화 할 수 있고 그것이 발견하는 태그가 #아닌으로 시작하는 링크 만 찾는다는 것을 만들 수 있습니다 a.

---

추가 후 작동하지 않는 경우

-webkit-transform : translateZ (0)

또한 추가하는 것보다

사용자 확장 가능 = 아니요

뷰포트 메타에서

여기에 소스

그것은 나를 위해 일했다

---

다른 경우에서 동일한 문제가 발생했습니다. 여러 곳에서 같은 아이디를 사용했기 때문입니다. 예를 들어 #full 2 ​​div를 사용했습니다.

mozilla와 IE는 여러 경우에 동일한 ID 사용을 지원하는 것 같습니다. 그러나 크롬은 그렇지 않습니다. 내 경우에는 고정 요소가 사라지는 반응을 보였습니다.

ID를 제거하면 문제가 해결되었습니다.

---

자바 스크립트를 통해 모달을 호출하는 것 외에는 그들 중 누구도 나를 위해 일하지 않았습니다.

<a href="#\" onclick="show_modal();">Click me to open MyModal</a>
<script>
function show_modal()
{
  MyModal.style.display = 'block';
}
</script>

이 외에는 위의 솔루션 중 어느 것도 내 문제를 해결하지 못했습니다.

---

If none of the answers above worked for you, make sure you aren't a dummy like me and have overflow: hidden; set on the fixed element :(

---

What if none of above worked at all? simple case of sticky header + mobile side menu pushing content.

I try to find a way to avoid fixed element (sticky header) being translated but in this case nothing is a good alternative.

So as there is no workaround on scope so far there is a JS alternative that I opted for to recalculate absolute position of fixed element. See here: https://stackoverflow.com/a/21487975/2012407

---

This Worked for me . Add Overflow property to your top most container which can be Div or Form etc.

div, form
{
  overflow:visible;    
}

참고URL : https://stackoverflow.com/questions/11258877/fixed-element-disappears-in-chrome