모바일 브라우저에서 \"위치 고정\" 문제를 해결하는 방법은 무엇입니까?

모바일 브라우저에서 위치 고정 문제 수정

문제:
위치 고정이 이전 버전의 iOS 및 특정 Blackberry 브라우저에서 작동하지 않습니다. , 요소가 페이지와 함께 스크롤되도록 합니다.

해결책:
이 문제를 해결하려면 -webkit-backface-visibility: hide 속성을 고정 요소.

<code class="css">.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 50px;
  background: red;
  -webkit-backface-visibility: hidden; /* This is the fix */
}</code>

설명:
-webkit-backface-visibility 속성은 요소가 사용자에게서 멀어질 때 요소가 표시되는 방식을 제어합니다. 기본적으로 표시되지 않습니다. 숨김으로 설정하면 브라우저가 요소에 대해 동일한 렌더링 컨텍스트를 유지하여 요소가 스크롤의 영향을 받지 않도록 합니다.

예:

<code class="html"><div class="fixed">
  Hi I'm Position Fixed
</div>
<div>
  <!-- Sample text -->
</div></code>

고정 요소에 -webkit-backface-visibility:hidden 속성을 ​​적용하면 위치가 지정된 iOS 및 Blackberry 브라우저에서도 요소가 화면에서 동일한 위치에 유지되도록 할 수 있습니다. 수정은 완전히 지원되지 않습니다.

위 내용은 모바일 브라우저에서 \"위치 고정\" 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!