Posicionar o iPhone pegajoso piscando

10

Seguindo um pequeno pedaço do meu código. Apenas querendo saber por que a célula "iphone" está piscando apenas no iphone. PS. Não posso usar uma tabela ou uma lista para a estrutura. Eu também tentei usar transform: translate3d(0,0,0);.

Basicamente, eu preciso que a primeira célula seja pegajosa tanto para esquerda quanto para cima no iPhone e iPad também. Eu gostaria de fazer isso usando apenas HTML e CSS.

IMPORTANTE

Por favor, não responda com soluções fixas , não sei onde a mesa será colocada no corpo. Haverá um cabeçalho, algum conteúdo, etc., etc.

Mostrar snippet de código

html css Vixed
fonte
Você verificou esse trecho de código com um iPhone real? porque parece bom para mim.
Sanira 17/10/19
É claro que sim @Sanira
Vixed 17/10/19
Provavelmente algo a ver com isso: github.com/ampproject/amphtml/issues/…
BugsArePeopleToo
11
@BugsArePeopleToo não parece ser o mesmo problema. Quero dizer, tenho um problema apenas com uma célula, não com todas.
Vixed 17/10/19
@ Vixed você deseja colar apenas uma célula ou a célula inteira da primeira linha da tabela?
Deepu Reghunath 21/10/19

Respostas:

8

Eu luto com esquisitices com iOS vs tudo o mais o tempo todo. Geralmente, envolve problemas de contexto de empilhamento. Parece-me que o elemento position: stickye left: 0se torna relativo à primeira linha no iOS. O iOS não lida com o contexto de empilhamento da mesma forma que todos os outros navegadores.

Eu nunca realmente descobri exatamente o que causa isso. Tecnicamente, a célula do seu iPhone fica presa à esquerda, mesmo quando está rolando, porque é relativa ao pai que não possui left: 0. Estou assumindo que isso tem a ver com a forma como o iOS lida position: sticky. O adesivo começa relativo e depois muda para fixo. Todos os outros navegadores nesse ponto o fariam à esquerda. Você tem um position: sticky;elemento dentro de um position: sticky;elemento. Esse é um novo contexto de empilhamento. Acredito que o iOS o torna fixo ao pai e não da maneira que você esperaria. Como a linha pai não temleft: 0vai rolar com todo o resto. Eu espero que isso ajude. Não vi cintilação, mas havia alguns componentes danificados na estrutura da web da minha empresa depois que o iOS 13 foi lançado, envolvendo contextos de rolagem e empilhamento. Eu testaria em vários dispositivos iOS.

editar depois de brincar um pouco mais, tenho certeza de que é um problema de empilhamento de contexto. Aumentei o índice z até 1000 apenas na célula do iphone e as linhas abaixo AINDA aparecem acima dela.

insira a descrição da imagem aqui

Se você não precisa dar suporte ao Internet Explorer, eu usaria grades CSS para obter esse layout. Então você não terá que se preocuparposition: sticky

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

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

Eu o uso para conteúdo pesado de dados dinâmicos em aplicativos de negócios, para que possa ser incrivelmente flexível se aproveitado adequadamente.

Atualizado novamente - Se você não pode alterar o DOM, precisará lidar com a oscilação, pois mesmo a solução de grade exigirá wrappers em torno de alguns elementos. Apenas para esclarecer .... Com uma solução de grade, você NÃO precisa saber quantas colunas ou linhas você terá. Você parece pendurado nesse aspecto. As áreas de grade também criam um novo contexto de empilhamento e tornam tudo relativo à área de grade em que está, permitindo unidades flexíveis. Não posso responder até que você mostre como os dados dinâmicos estão chegando. Precisamos de mais contexto para fornecer uma solução de código.

Novamente, a tremulação está acontecendo porque você tem um elemento posicionado dentro de outro elemento. Isso é apenas iOS e se você quiser usá-lo dessa maneira, precisará lidar com isso.

Aqui está a documentação sobre os contextos de empilhamento e como eles funcionam. Como afirmei em um comentário, você terá que adotar uma abordagem diferente ou apenas lidar com ela.

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

Além disso --

Oculte o excesso no seu HTML e corpo. Coloque um invólucro em volta da mesa. Coloque -webkit-overflow-scrolling: autoa embalagem. Execute-o no iOS 12 e você verá que não pisca. Você não terá rolagem de momento. O iOS13 removeu a necessidade do, -webkit-overflow-scrollingpara que você não possa substituí-lo. Se você colocar o valor de touchem -webkit-overflow-scrolling, agora ficará piscando. Execute este código abaixo e você verá que ele não pisca. Para encurtar a história, como já disse muitas vezes, você precisará encontrar uma abordagem diferente. Você não pode consertar isso agora que o iOS13 está fora e realmente não gostaria de desativar a rolagem de momento.

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>
Expandir snippet

Brett Parsons
fonte
Oi Brett, obrigado pela sua resposta. Infelizmente não posso usar "grade", pois o número de linhas e colunas é dinâmico. Se eu usar a grade, terei que gerenciá-la com algumas JS e não posso.
Vixed 24/10/19
Você pode usá-lo com conteúdo dinâmico. Eu faço isso todo dia. Se eu tiver tempo hoje, atualizarei minha resposta com algum código.
Brett Parsons
As grades CSS criarão o que é chamado de trilhas de grade implícitas e o conteúdo será colocado ao longo do modelo explícito que você definir. Eu fiz algumas coisas loucas com layouts dinâmicos usando-o.
Brett Parsons
Não sei o número de colunas. A largura não é 100vw, mas cada vez mais!
Vixed
Obrigado pelo esclarecimento sobre se você precisa ou não oferecer suporte ao IE. Agora eu posso gastar o tempo para mostrar a você.
Brett Parsons
-1

Se você reorganizar os elementos, poderá conseguir isso.

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>
Expandir snippet

Deepu Reghunath
fonte
Obrigado Deepu, mas deve ser pegajoso, não fixo, pois não sei onde a tabela aparecerá.
Vixed
Adicionado explicação na pergunta.
Vixed em 21/10/19
@Vixed Eu atualizei a solução
Deepu Reghunath
Eu vi, mas você mudou todo o dom. Como eu disse, não posso fazer isso.
Vixed
@Vixed Respondi sua pergunta, por favor, verifique a solução que publiquei, fiz a minha pegajosa.
darligee