スティッキーiPhoneの位置がちらつく

10

私のコードの一部をフォローしています。「iphone」セルがiphoneからのみ点滅している理由を知りたくてたまらない。PS。構造にテーブルやリストを使用できません。私も使ってみましたtransform: translate3d(0,0,0);。

基本的に、iPhoneとiPadの左と上に、最初のセルをスティッキーにする必要があります。HTMLとCSSのみを使用してそれを実行したいと思います。

重要

固定の解答で答えないでください。テーブルが本体のどこに配置されるのかわかりません。ヘッダー、一部のコンテンツなどがあります。

コードスニペットを表示

html  css 
— Vixed
ソース
実際のiPhoneでこのコードスニペットを確認しましたか？それは私には大丈夫だと思うので。
— Sanira、
もちろん私は@Saniraやった
— Vixed
これと関係があると思われるもの：github.com/ampproject/amphtml/issues/…– BugsArePeopleToo '17
— 10/17
1
@BugsArePeopleTooは同じ問題ではないようです。つまり、すべてではなく、セルのみに問題があります。
— 混合
@Vixedテーブルの最初の行の1つのセルのみまたはセル全体を貼り付けますか？
— 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が登場し、スクロールコンテキストとスタックコンテキストが含まれるようになった後、会社のWebフレームワークに壊れたコンポーネントがいくつかありました。複数のiOSデバイスでテストします。

それを少し試して編集した後、スタッキングコンテキストの問題であると確信しています。iphoneセルのみでz-indexを最大1000に調整すると、STILLの下の行がその上に表示されます。

ここに画像の説明を入力してください

Internet Explorerをサポートする必要がない場合は、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オーバーライドすることもできません。touchon の値を設定-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>
スニペットを展開

— ブレットパーソンズ
ソース
こんにちはブレット、あなたの答えをありがとう。残念ながら、行と列の数は動的であるため、「グリッド」を使用できません。グリッドを使用する場合、いくつかのJSでグリッドを管理する必要がありますが、できません。
— 混合
動的コンテンツで使用できます。私は毎日それをします。今日時間があれば、いくつかのコードで回答を更新します。
— Brett Parsons
CSSグリッドは、いわゆる暗黙のグリッドトラックを作成し、コンテンツは、定義した明示的なテンプレートに沿って配置されます。私はそれを使用して動的レイアウトでいくつかのクレイジーなことをしました。
— Brett Parsons、
列の数がわかりません。幅は100vwじゃなくてますます！
— 混合
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ソリューションを更新しました
— Deepu Reghunath
私は見ましたが、あなたはすべてのdomを変えました。言ったように、それはできません。
— 混合
@Vixed私はあなたの質問に答えました、私が投稿した解決策を親切に確認してください、私は私の粘着性を作りました。
— Darligee
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.