Position:이 이전 모바일 브라우저에서 작동하지 않는 문제가 수정된 이유는 무엇입니까?

모바일 브라우저에서 위치 고정이 작동하지 않음

문제:

CSS 위치를 사용하여 요소를 위치에 고정하기: 고정 이전 버전의 iOS 및 Android 모바일 브라우저에서는 작동하지 않을 수 있습니다. 요소는 고정 위치를 무시하고 페이지와 함께 스크롤됩니다.

원인:

iOS < 5 및 Android < 4 위치를 완전히 지원하지 않습니다: 고정 속성.

해결 방법:

-webkit-backface-visibility: Hidden;

사용

이 CSS 속성은 브라우저가 요소를 3D 요소로 처리하도록 하여 고정 위치 지정을 가능하게 합니다.

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

샘플 코드:

  Hi I m Position Fixed


  sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text

이 솔루션은 테스트를 거쳤으며 이전 버전의 iOS 및 Android를 포함한 대부분의 모바일 브라우저에서 원활하게 작동합니다.
위 내용은 Position:이 이전 모바일 브라우저에서 작동하지 않는 문제가 수정된 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!