위치: iPad 및 iPhone에서 fixed가 작동하지 않습니다.

위치: iPad 및 iPhone에서 fixed가 작동하지 않습니다.

저는 한동안 iPad에서 고정 위치 설정에 어려움을 겪고 있습니다.저는 iScroll을 알고 있으며 (그들의 데모에서도) 항상 작동하는 것 같지는 않습니다.Sencha가 수정 사항을 가지고 있다는 것도 알지만, 저는 수정 사항의 소스 코드를 +할 수 없었습니다.

나는 누군가 해결책을 가지고 있기를 바랍니다.문제는 사용자가 iOS로 구동되는 모바일 Safari에서 아래로 이동하거나 위로 이동할 때 고정 위치 요소가 업데이트되지 않는다는 것입니다.

많은 모바일 브라우저가 의도적으로 지원하지 않습니다.position:fixed;작은 화면에서 고정된 요소가 방해가 될 수 있다는 이유로.

Quirksmode.org 사이트에는 문제를 설명하는 매우 좋은 블로그 게시물이 있습니다. http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

어떤 가 지원하는지 는 이 하십시오.position:fixed;: http://www.quirksmode.org/m/css.html

(그러나 모바일 브라우저 세상은 매우 빠르게 움직이고 있기 때문에 이와 같은 테이블은 오랫동안 최신 상태를 유지하지 못할 수도 있습니다!)

업데이트: iOS 5와 Android 4는 모두 현재 고정 지원을 제공하는 것으로 보고되었습니다.

저는 오늘 애플 스토어에서 iOS 5를 직접 테스트했고 위치가 고정된 상태에서 작동하는지 확인할 수 있습니다.하지만 고정된 요소를 확대하고 이동하는 데 문제가 있습니다.

저는 이 호환성 표가 퀴크 모드 표보다 훨씬 최신이고 유용하다는 것을 알게 되었습니다. http://caniuse.com/ #search=fixed

Android, Opera(미니 및 모바일) 및 iOS에 대한 최신 정보를 제공합니다.

고정 위치 설정은 컴퓨터에서처럼 iOS에서 작동하지 않습니다.

돋보기(보기 포트) 아래에 종이(웹 페이지)가 있다고 가정해 보십시오. 돋보기와 눈을 움직이면 페이지의 다른 부분이 표시됩니다.이것이 iOS의 작동 방식입니다.

이제 단어가 적힌 투명 플라스틱 시트가 있습니다. 이 플라스틱 시트는 어떤 위치(고정 요소)에서도 정지 상태를 유지합니다.그래서 돋보기를 움직이면 고정된 요소가 움직이는 것처럼 보입니다.

또는 돋보기를 이동하는 대신 용지(웹 페이지)를 이동하여 플라스틱 및 돋보기 시트를 그대로 유지합니다.이 경우 플라스틱 시트의 단어는 고정된 상태로 유지되고 나머지 내용은 움직이는 것으로 나타납니다(실제 내용이기 때문에).이것은 전통적인 데스크톱 브라우저입니다.

그래서 iOS에서는 뷰포트가 움직이고, 전통적인 브라우저에서는 웹페이지가 움직입니다.두 경우 모두 고정 요소는 실제로 그대로 유지됩니다. iOS에서는 고정 요소가 움직이는 것처럼 보이지만 말입니다.

---

이 문제를 해결하는 방법은 이 기사의 마지막 몇 단락을 따르는 것입니다.

(스크롤을 완전히 비활성화하고, 콘텐츠를 별도의 스크롤 가능한 div(링크된 기사 상단의 파란색 상자 참조), 고정 요소를 절대적으로 배치합니다.)

---

"position:fixed"는 이제 iOS5에서 기대하는 대로 작동합니다.

position: fixed는 수직 스크롤을 위해 안드로이드/노트북에서 작동합니다.그러나 메타 태그가 완전히 설정되었는지 확인해야 합니다. 예:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

또한 안드로이드 4.0 이전 버전에서 동일한 페이지를 사용할 계획이라면 상위 위치도 설정해야 합니다. 그렇지 않으면 어떤 이유로 인해 약간의 마진이 추가됩니다.

Safari(iOS 10.3.3)에서 이 문제가 발생했습니다. 터치엔드 이벤트가 실행될 때까지 브라우저가 다시 그려지지 않았습니다.고정 요소가 나타나지 않거나 잘렸습니다.

저의 비결은 3d(0,0,0) 변환을 고정 위치 요소에 추가하는 것이었습니다.

.fixed-position-on-mobile {
  position: fixed;
  transform: translate3d(0,0,0);
}

편집 - 이제 변환을 통해 하드웨어 가속 문제가 해결되는 이유를 알게 되었습니다.3D 변환을 추가하면 GPU 가속을 트리거하여 원활한 전환이 가능합니다.하드웨어 가속에 대한 자세한 내용은 http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css 문서를 참조하십시오.

이제 사과는 그것을 지지합니다.

overflow:hidden;
-webkit-overflow-scrolling:touch;

고정 바닥글(jQuery 포함):

if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || navigator.platform == 'Linux armv6l') {
  window.ontouchstart = function() {
    $("#fixedDiv").css("display", "none");
  }

  window.onscroll = function() { 
    // 45 is the height of the Footer
    var iPadPosition = window.innerHeight + window.pageYOffset-45;

    $("#fixedDiv").css("position", "absolute");
    $("#fixedDiv").css("top", iPadPosition);
    $("#fixedDiv").css("display", "block");
  }
}

CSS 파일에는 다음이 있어야 합니다.

 #fixedDiv {
  position: fixed;
  bottom: 0;
  height: 45px;
  ...
}

변환:--- 및 위치:고정을 사용하여 동일한 상자에서 사용하지 않도록 합니다.요소가 위치를 유지합니다. 변환이 있는 경우 정적입니다.

새로운 jQuery Mobile v1.1을 사용하게 되었습니다. http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/

이제 많은 인기 플랫폼에서 진정한 고정 도구 모음을 제공하고 다른 브라우저에서 정적 도구 모음 위치로 안전하게 다시 이동하는 견고한 재작성 기능을 제공합니다.

이 접근 방식에서 가장 멋진 부분은 모든 플랫폼에 비정상적인 스크롤 물리학을 적용하는 JS 기반 솔루션과 달리 스크롤이 100% 네이티브로 느껴진다는 것입니다.이것은 스크롤이 어디에서나 제대로 느껴지며 터치, 마우스 휠 및 키보드 사용자 입력과 함께 작동한다는 것을 의미합니다.추가적으로, 우리의 CSS 기반 솔루션은 초경량이며 호환성이나 접근성에 영향을 주지 않습니다.

jquery를 사용하여 저는 이것을 생각해 낼 수 있습니다.그것은 부드럽게 스크롤되지 않지만, 속임수를 씁니다.아래로 스크롤하면 위에 고정된 디브가 나타납니다.

CSS

<style type="text/css">
    .btn_cardDetailsPg {height:5px !important;margin-top:-20px;}
    html, body {overflow-x:hidden;overflow-y:auto;}
    #lockDiv {
  background-color: #fff;
  color: #000;
  float:left;
  -moz-box-shadow: 0px 4px 2px 2px #ccc;-webkit-box-shadow: 0px 4px 2px 2px #ccc;box-shadow:0px 4px 2px 2px #ccc;
  }
#lockDiv.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  margin-left:0px;
  }
</style>

HTML

<div id="lockSticky"></div>
<div id="lockDiv">fooo</div>

jQuery

<script type="text/javascript">
    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var div_top = $('#lockSticky').offset().top;
        if (window_top > div_top)
            $('#lockDiv').addClass('stick')
        else
            $('#lockDiv').removeClass('stick');
    }
    $(function() {
        $(window).scroll(sticky_relocate);
        sticky_relocate();
    });
</script>

마지막으로 iPod가 가로 또는 세로 모드로 터치되어 표시되는지 여부를 결정합니다.

<script type="text/javascript">
    if (navigator.userAgent.match(/like Mac OS X/i)) {
        window.onscroll = function() {

        if (window.innerWidth > window.innerHeight) {
            //alert("landscape [ ]");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 268) + 'px';
        }

        if (window.innerHeight > window.innerWidth) {
            //alert("portrait ||");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 418) + 'px';
        }
        };
    }
</script>

이 문제를 해결하는 간단한 방법은 요소에 대한 변환 속성을 입력하기만 하면 수정됩니다.

.classname{
  position: fixed;
  transform: translate3d(0,0,0);
}

또한 당신은 그의 방법을 시도할 수도 있습니다. 이것도 좋습니다.

.classname {
  position: -webkit-sticky;
}

록비 CSS 에도.{position:fixed;}(대부분이) 더 새로운 iOS 기기에서 작동하는 것처럼 보이며, 기기를 특이하게 만들고 다시 사용하는 것이 가능합니다.{position:relative;}때때로 이유도 이유도 없이일반적으로 캐시를 지우는 것이 도움이 됩니다. 어떤 일이 발생하고 특이한 현상이 다시 발생할 때까지요.

특히, Apple 자체에서 iPad용 웹 콘텐츠 준비:

iPad의 Safari와 iPhone의 Safari에는 크기를 조정할 수 있는 창이 없습니다.iPhone 및 iPad의 Safari에서 창 크기는 화면 크기(Safari 사용자 인터페이스 컨트롤 제외)로 설정되며 사용자가 변경할 수 없습니다.웹 페이지를 이동하려면 사용자가 확대 또는 축소하기 위해 두 번 누르거나 꼬집거나 페이지를 이동하기 위해 터치 및 끌어서 보기 포트의 확대/축소 수준과 위치를 변경합니다.사용자가 뷰포트의 확대/축소 수준과 위치를 변경하면 고정 크기의 볼 수 있는 콘텐츠 영역(즉, 창) 내에서 변경됩니다.즉, 뷰포트에 "고정" 위치를 가진 웹 페이지 요소가 화면 밖에서 볼 수 있는 콘텐츠 영역을 벗어날 수 있습니다.

아이러니한 것은 안드로이드 기기에는 이 문제가 없는 것 같습니다.또한 완전히 사용할 수 있습니다.{position:absolute;}바디 태그와 관련하여 문제가 없는 경우.

저는 이 특이점의 근본 원인을 발견했습니다. HTML 또는 BODY 태그와 함께 사용할 때 스크롤 이벤트가 제대로 재생되지 않기 때문입니다.이벤트를 시작하는 것을 싫어하거나 스크롤 스윙 이벤트가 완료될 때까지 기다려야 이벤트를 받을 수 있습니다.특히, 뷰포트는 이 이벤트가 끝날 때 다시 그려지며 고정 요소는 뷰포트의 다른 위치에 재배치될 수 있습니다.

그래서 제가 하는 일은 이렇습니다. (뷰포트 사용을 피하고 DOM을 고수하세요!

<html>
  <style>
    .fixed{
      position:fixed;
      /*you can set your other static attributes here too*/
      /*like height and width, margin, etc.*/
      }
    .scrollableDiv{
      position:relative;
      overflow-y:scroll;
      /*all children will scroll within this like the body normally would.*/
      } 
    .viewportSizedBody{
      position:relative;
      overflow:hidden;
      /*this will prevent the body page itself from scrolling.*/
      } 
  </style>
  <body class="viewportSizedBody">
    <div id="myFixedContainer" class="fixed">
       This part is fixed.
    </div>
    <div id="myScrollableBody" class="scrollableDiv">
       This part is scrollable.
    </div>
  </body>
  <script type="text/javascript" src="{your path to jquery}/jquery-1.7.2.min.js"></script>
  <script>
    var theViewportHeight=$(window).height();
    $('.viewportSizedBody').css('height',theViewportHeight);
    $('#myScrollableBody').css('height',theViewportHeight);
  </script>
</html>

기본적으로 BODY는 뷰포트의 크기이며 스크롤할 수 없습니다.내부에 중첩된 스크롤 가능 DIV는 BODY가 정상적으로 스크롤하는 방식으로 스크롤됩니다(스윙 효과를 제외하고 스크롤이 터치 끝에서 중지됨).고정 DIV는 간섭 없이 고정된 상태를 유지합니다.

참고로 하이z-index스크롤 가능한 DIV가 뒤에 있는 것처럼 보이도록 하려면 고정 DIV의 값이 중요합니다.일반적으로 창 크기 조정 및 스크롤 이벤트를 추가하여 브라우저 간 및 대체 화면 해상도 호환성을 제공합니다.

그렇지 않으면 위의 코드는 고정 DIV와 스크롤 가능 DIV 모두에서 다음과 같이 설정되어 작동합니다.{position:absolute;}.

저 같은 경우에는 애니메이션을 이용해서 고정된 요소를 보여주고 있었기 때문입니다.이 링크에 명시된 바와 같이:

Safari 9.1에서 애니메이션 요소 내부에 위치 고정 요소가 있으면 위치 고정 요소가 나타나지 않을 수 있습니다.

아이폰 X에서도 같은 문제가 있었습니다.고정하기 위해 컨테이너에 높이를 추가합니다.

top: 0;
height: 200px;
position: fixed;

나는 단지 상위를 유지하기 위해 내 디비가 필요하기 때문에 top:0을 추가했습니다.

이것이 모든 시나리오에 적용되지는 않을 수 있지만, 저는 그것이position: sticky(와 같은 것)position: fixed스크롤 컨테이너가 본체가 아닌 다른 내부일 때만 구형 아이폰에서 작동합니다.

유사 html 예제:

body                         <- scrollbar
   relative div
       sticky div

sticky div는 데스크톱 브라우저에서는 끈적거리지만 특정 장치에서는 다음을 사용하여 테스트됩니다.크롬: 개발 도구: 장치 에뮬레이션: iPhone 6/7/8 및 Android 4 Firefox에서는 그렇지 않습니다.

하지만 효과가 있는 것은

body
    div overflow=auto       <- scrollbar
        relative div
            sticky div

이것은 iOS 12.4.2의 iPhone 6 Plus에서 Ionic5에서 작동하는 것으로 보입니다.

.large_player {
  float: left;
  bottom: 0;
  width: 100%;
  position: fixed;
  background-color: white;
  border-top: black 1px solid;    
  height: 14rem;
  z-index: 100;
  transform: translate3d(0,0,0);
}

그transform태그는 그것을 작동하게 하지만 스크롤이 작동하는 방식에서 약간 투박한 것처럼 보이기도 합니다. 그것은 그것이 모두 이동하고 약간 재설정된 후에 '위에 있는' 요소를 다시 그리고 그것을 약간 뛰게 만드는 것처럼 보입니다.

또는 이 태그 옵션을 사용할 수도 있습니다.position: -webkit-sticky;그러나 버전 확인을 해야 하고 여러 CSS 태그가 있어야 하는 동안 WPA/브라우저 또는 Android 빌드에 문제가 발생하거나 발생할 수 있습니다.

.large_player {
  float: left;
  bottom: 0;
  width: 100%;
  position: -webkit-sticky;
  background-color: white;
  border-top: black 1px solid;    
  height: 14rem;
  z-index: 100; 
}

어느 시점에서 고쳐졌는지는 모르겠지만, 나중에 iOS 폰은 변환 태그 없이 작동합니다.iOS 버전인지, 아니면 전화기인지 모르겠습니다.

대부분의 iOS 기기는 일반적으로 최신 iOS 버전이기 때문에, 사용하는 것과 같은 이상한 작업을 하는 것이 꽤 안전합니다.transform 기발한 루틴을 구축하는 것이 .1% 미사용를자위해기발한탐루지구틴다대사는태니합용신그를하축을만.

업데이트:

이 답변에 대해 더 생각해 본 후, 이것은 이온 5+용 플랫폼별로 이를 수행하는 또 다른 방법은 다음과 같습니다.

.TS

import {Platform } from '@ionic/angular';

constructor(public platform: Platform) {  
  // This next bit is so that the CSS is shown correctly for each platform    

  platform.ready().then(() => {
    if (this.platform.is('android')) {
      console.log("running on Android device!");
      this.css_iOS = false;
    }
    if (this.platform.is('ios')) {
      console.log("running on iOS device!");
      this.css_iOS = true;
    }     
    if (this.platform.is('ipad')) {
      console.log("running on iOS device!");
      this.css_iOS = true;
    }
  });
}
css_iOS: boolean = false;

.HTML

<style *ngIf="css_iOS">
  .small_player {
    position: -webkit-sticky !important;
  }
  .large_player {
    position: -webkit-sticky !important;
  }
</style>
    
    
<style>
  .small_player {
    float: left;
    bottom: 0;
    width: 100%;
    position: fixed;
    background-color: white;
    border-top: black 1px solid;    
    height: 4rem;
    z-index: 100;
    /*transform: translate3d(0,0,0);*/
  }
    
  .large_player {
    float: left;
    bottom: 0;
    width: 100%;
    position: fixed;
    background-color: white;
    border-top: black 1px solid;    
    height: 14rem;
    z-index: 100;
    /*transform: translate3d(0,0,0);*/
  }
</style>

언급URL : https://stackoverflow.com/questions/4889601/position-fixed-doesnt-work-on-ipad-and-iphone