끈적 끈적한 iPhone 깜박임 위치

10

내 코드의 작은 조각을 따르십시오. 왜 "아이폰"셀이 아이폰에서만 깜빡 거리는지 알고 싶을뿐입니다. 추신. 구조에 테이블이나 목록을 사용할 수 없습니다. 나는 또한 사용하려고했다 transform: translate3d(0,0,0);.

기본적으로 iPhone 및 iPad에서 Left 및 Top에 대해 첫 번째 셀이 고정되어 있어야합니다. HTML 및 CSS 만 사용 하여이 작업을 수행하고 싶습니다.

중대한

고정 솔루션으로 대답 하지 마십시오. 테이블이 몸에 어디에 위치하는지 모르겠습니다. 헤더, 일부 내용 등이 있습니다.

코드 스 니펫 표시

html  css 
— 여우
소스
이 코드 스 니펫을 실제 iPhone으로 확인 했습니까? 나에게는 괜찮아 보이기 때문입니다.
— Sanira
물론 @Sanira
— Vixed
아마도 이것과 관련이있을 것입니다 : github.com/ampproject/amphtml/issues/…
— BugsArePeopleToo
1
@BugsArePeopleToo는 같은 문제가 아닌 것 같습니다. 나는 세포에만 문제가 있다는 것을 의미합니다.
— Vixed
@Vixed 테이블의 첫 번째 행의 하나의 셀 또는 전체 셀만 붙이시겠습니까?
— Deepu Reghunath

답변:

8

나는 iOS와 다른 모든 것들에 대해 항상 싸우고 있습니다. 일반적으로 스태킹 컨텍스트 문제와 관련이 있습니다. 나에게 position: stickyand left: 0요소는 iOS의 첫 번째 행 과 관련 이있는 것으로 보입니다 . iOS는 다른 모든 브라우저와 동일하게 스택 컨텍스트를 처리하지 않습니다.

나는 이것을 일으키는 원인을 정확히 파악하지 못했습니다. 기술적으로 iPhone 셀은 스크롤하지 않아도 왼쪽에 붙어있어 부모가없는 부모에 상대적이기 때문에 스크롤 left: 0됩니다. 나는 이것이 iOS가 처리하는 방식과 관련이 있다고 가정합니다 position: sticky. 고정은 상대적으로 시작된 다음 고정으로 변경됩니다. 그 시점의 다른 모든 브라우저는 왼쪽에 붙어 있습니다. 당신은이 position: sticky;내부 요소 position: sticky;요소를. 이것이 새로운 스태킹 컨텍스트입니다. 나는 iOS가 그것을 부모의 방식으로 고정시키고 당신이 기대하는 방식이 아니라고 생각합니다. 부모 행에는 없기 때문에left: 0다른 모든 것들과 함께 스크롤됩니다. 이게 도움이 되길 바란다. 깜박임이 없었지만 iOS 13이 스크롤 및 스태킹 컨텍스트와 관련 된 후 회사의 웹 프레임 워크에서 일부 깨진 구성 요소가있었습니다. 여러 iOS 기기에서 테스트하고 싶습니다.

좀 더 놀아 본 후에 편집 하면 스택 컨텍스트 문제라고 확신합니다. 나는 iphone 셀에서만 z-index를 1000까지 크랭크했고 아래 행은 여전히 ​​그 위에 나타납니다.

여기에 이미지 설명을 입력하십시오

인터넷 익스플로러를 지원할 필요가 없다면 CSS 그리드를 사용하여이 레이아웃을 얻을 것입니다. 그러면 걱정할 필요가 없습니다position: sticky

https://css-tricks.com/snippets/css/complete-guide-grid/

https://css-tricks.com/using-css-grid-the-right-way/

비즈니스 응용 프로그램에서 동적 데이터가 많은 콘텐츠에 사용하므로 제대로 활용하면 매우 유연 할 수 있습니다.

다시 업데이트 됨-DOM을 전혀 변경할 수 없으면 그리드 솔루션조차도 일부 요소 주위에 래퍼가 필요하므로 깜박임을 처리해야합니다. 명확히 하기 위해 .... 그리드 솔루션을 사용하면 얼마나 많은 열이나 행을 가질 지 알 필요가 없습니다. 당신은 그 측면에 매달린 것 같습니다. 그리드 영역은 또한 새로운 스태킹 컨텍스트를 만들고 유연한 유닛을 허용하면서 그리드 영역과 관련된 모든 것을 만듭니다. 동적 데이터가 어떻게 들어오는 지 보여줄 때까지 답을 드릴 수 없습니다. 코드 솔루션을 제공하려면 더 많은 컨텍스트가 필요합니다.

다시 말하지만, 다른 끈적 거리는 요소 안에 끈적 거리는 요소가 있기 때문에 깜박임이 발생합니다. 그것은 iOS 일뿐이며 이와 같이 사용하려면 처리해야합니다.

다음은 컨텍스트 스태킹 및 작동 방식에 대한 설명서입니다. 의견에서 언급했듯이 다른 접근 방식을 취하거나 처리해야합니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

또한-

HTML 및 본문에서 오버플로를 숨 깁니다. 테이블 주위에 포장지를 두십시오. 넣어 -webkit-overflow-scrolling: auto래퍼에. iOS 12에서 실행하면 깜박이지 않는 것을 볼 수 있습니다. 그래도 운동량 스크롤이 없습니다. iOS13은 필요성을 제거하여 -webkit-overflow-scrolling재정의 할 수도 없습니다. 값을 touch설정 -webkit-overflow-scrolling하면 깜박임이 발생합니다. 아래에서이 코드를 실행하면 깜박이지 않는 것을 볼 수 있습니다. 몇 번이나 말했듯이 긴 이야기는 짧습니다. 다른 접근법을 찾아야합니다. iOS13이 종료되어 모멘텀 스크롤을 비활성화하지 않으려는 경우이 문제를 해결할 수 없습니다.

html {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.wrapper {
  overflow: auto;
  -webkit-overflow-scrolling: auto;
  width: 100%;
  height: 100%;
}
.table {
  width: 2000px;
  position: relative;
}

.tr {
  overflow: visible;
  display: block;
  white-space: nowrap;
  font-size: 0;
}

.tc {
  border: 1px solid #DDD;
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 12px;
}

.trh {
  background: #000;
  color: #FFF;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tc.first {
  background: #000;
  color: #FFF;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
}
<html>
  <head>
    <link rel="stylesheet" href="css.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="wrapper">
      <div class="table">
          <div class="tr trh">
            <div class="tc first">Iphone</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">2</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
        </div>
    </div>
  </body>
</html>
스 니펫 확장

— 브렛 파슨스
소스
안녕하세요 Brett, 답변 주셔서 감사합니다. 불행히도 행 수와 열이 동적이므로 "그리드"를 사용할 수 없습니다. 그리드를 사용하면 일부 JS로 그리드를 관리해야하지만 할 수 없습니다.
— Vixed
동적 컨텐츠와 함께 사용할 수 있습니다. 나는 매일한다. 오늘 시간이 걸리면 코드로 답변을 업데이트하겠습니다.
— Brett Parsons
CSS 그리드는 암시 적 그리드 트랙이라는 것을 만들고 컨텐츠는 사용자가 정의한 명시 적 템플릿을 따라 배치됩니다. 동적 레이아웃을 사용하여 미친 짓을했습니다.
— Brett Parsons
나는 열의 수를 모른다. 너비는 100vw가 아니지만 점점 더 많이 발생합니다!
— Vixed
IE를 지원해야하는지 여부에 대한 설명을 해주셔서 감사합니다. 이제 나는 당신에게 시간을 보낼 수 있습니다.
— Brett Parsons
-1

요소를 재 배열하면이를 달성 할 수 있습니다.

body {
  margin: 0;
  position: absolute;
  height: 100%;
  width: 100%;
}

.table {
  position: relative;
  width: 100%;
  height: 100%;
}

.tr {
  overflow: visible;
  display: block;
  white-space: nowrap;
  font-size: 0;
}

.tc {
  border: 1px solid #DDD;
  display: inline-block;
  width: 100px;
  min-height: 100px;
  text-align: center;
  font-size: 12px;
}

.trh,
.tc.first {
  background: #000;
  color: #FFF;
}

.table {
  overflow: hidden;
}

.table-body {
  display: flex;
  height: calc(100% - 102px);
}

.row-head {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-content {
  width: calc(100% - 102px);
  height: 100%;
  overflow: scroll;
}
<div class="table">
  <div class="tr trh">
    <div class="tc first">Iphone</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
  </div>
  <div class="table-body">
    <div class="row-head">
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
    </div>
    <div class="table-content">
      <div class="tr">
        <div class="tc">1</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">2</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
    </div>
  </div>
</div>
스 니펫 확장

— 디푸 레구나 스
소스
고마워 Deepu,하지만 테이블이 나타날 위치를 모르기 때문에 고정되어 있지 않아야합니다.
— Vixed
질문에 설명이 추가되었습니다.
— Vixed
@Vixed 솔루션을 업데이트했습니다
— Deepu Reghunath
나는 보았다. 그러나 당신은 모든 돔을 바꾸었다. 내가 말했듯이, 나는 그것을 할 수 없습니다.
— Vixed
@Vixed 나는 당신의 질문에 대답했습니다, 친절하게 내가 게시 한 솔루션을 확인하십시오, 나는 내 끈적 거리게 만들었습니다.
— darligee
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.