Posición parpadeante del iPhone

10

Siguiendo un pedacito de mi código. Solo me pregunto por qué la celda "iphone" parpadea solo desde iphone. PD. No puedo usar una tabla o una lista para la estructura. También intenté usar transform: translate3d(0,0,0);.

Básicamente, también necesito que la primera celda sea pegajosa para Left y Top en iPhone y iPad. Me gustaría hacer eso usando solo HTML y CSS.

IMPORTANTE

Por favor, no responda con soluciones fijas , no sé dónde se colocará la mesa en el cuerpo. Habrá un encabezado, algún contenido, etc., etc.

Mostrar fragmento de código

html css Vixed
fuente
¿Revisaste este fragmento de código con un iPhone real? porque me parece bien
Sanira
Por supuesto que lo hice @Sanira
Vixed
Probablemente algo que ver con esto: github.com/ampproject/amphtml/issues/…
BugsArePeopleToo
1
@BugsArePeopleToo no parece ser el mismo problema. Quiero decir que tengo un problema solo con una celda, no con todas.
Vixed
@Vixed, ¿desea pegar solo una celda o la celda completa de la primera fila de la tabla?
Deepu Reghunath

Respuestas:

8

Lucho rarezas con iOS vs todo lo demás todo el tiempo. Generalmente implica problemas de contexto de apilamiento. Me parece que el elemento position: stickyy left: 0se vuelve relativo a esa primera fila en iOS. iOS no maneja el contexto de apilamiento de la misma manera que todos los otros navegadores.

Realmente nunca he descubierto exactamente qué causa esto. Técnicamente, la celda de su iPhone está atascada a la izquierda incluso cuando se desplaza porque es relativa a su padre, que no tiene left: 0. Supongo que esto tiene que ver con cómo maneja iOS position: sticky. Sticky comienza relativo y luego cambia a fijo. Todos los otros navegadores en ese punto lo harían pegar a la izquierda. Tienes un position: sticky;elemento dentro de un position: sticky;elemento. Ese es un nuevo contexto de apilamiento. Creo que iOS lo hace fijo a su padre y no de la manera que esperarías. Como la fila principal no tieneleft: 0se va a desplazar con todo lo demás. Espero que esto ayude. No vi parpadeo, pero tenía algunos componentes rotos en el marco web de mi empresa después de que salió iOS 13 que involucraba contextos de desplazamiento y apilamiento. Lo probaría en múltiples dispositivos iOS.

editar después de jugar un poco más con él, estoy seguro de que es un problema de contexto de apilamiento. Elevé el índice z hasta 1000 solo en la celda del iPhone y las filas debajo de TODAVÍA aparecen encima de él.

ingrese la descripción de la imagen aquí

Si no tiene que admitir Internet Explorer, usaría cuadrículas CSS para lograr este diseño. Entonces no tendrás que preocuparte porposition: sticky

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

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

Lo uso para contenido dinámico de datos pesados ​​en aplicaciones comerciales, por lo que puede ser increíblemente flexible si se aprovecha adecuadamente.

Actualizado nuevamente : si no puede cambiar el DOM en absoluto, tendrá que lidiar con el parpadeo, ya que incluso la solución de cuadrícula requerirá envoltorios alrededor de algunos elementos. Solo para aclarar ... Con una solución de cuadrícula NO necesita saber cuántas columnas o filas tendrá. Parece colgado en ese aspecto. Las áreas de cuadrícula también crean un nuevo contexto de apilamiento y hacen todo lo relativo al área de cuadrícula en la que se encuentra, al tiempo que permiten unidades flexibles. No puedo darle una respuesta hasta que muestre cómo ingresan sus datos dinámicos. Necesitamos más contexto para darle una solución de código.

Nuevamente, el parpadeo está ocurriendo porque tiene un elemento colocado dentro de otro elemento fijo. Eso es solo iOS y si quieres usarlo así, tendrás que lidiar con eso.

Aquí hay documentación sobre los contextos de apilamiento y cómo funcionan. Como dije en un comentario, tendrá que adoptar un enfoque diferente o simplemente tratarlo.

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

También --

Oculte el desbordamiento en su HTML y cuerpo. Pon una envoltura alrededor de la mesa. Poner -webkit-overflow-scrolling: autoel envoltorio. Ejecútelo en iOS 12 y verá que no parpadea. Sin embargo, no tendrás desplazamiento de impulso. iOS13 eliminó la necesidad de -webkit-overflow-scrollingque no puedas anularlo. Si coloca el valor de touchen la -webkit-overflow-scrollingque tendrá ahora parpadeo. Ejecute este código a continuación y verá que no parpadea. En pocas palabras, como he dicho muchas veces, tendrá que encontrar un enfoque diferente. No puede arreglar esto ahora que iOS13 está fuera y realmente no hubiera querido deshabilitar el desplazamiento de impulso de todos modos.

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 fragmento

Brett Parsons
fuente
Hola Brett, gracias por tu respuesta. Lamentablemente no puedo usar "cuadrícula" ya que el número de filas y las columnas son dinámicas. Si usaré grid, tendré que administrarlo con algunos JS y no puedo.
Vixed
Puedes usarlo con contenido dinámico. Lo hago todos los dias. Si tengo tiempo hoy, actualizaré mi respuesta con algún código.
Brett Parsons
Las cuadrículas CSS crearán lo que se denomina pistas de cuadrícula implícitas y el contenido se colocará a lo largo de la plantilla explícita que defina. He hecho algunas cosas locas con diseños dinámicos usándolo.
Brett Parsons
No sé el número de columnas. El ancho no es 100vw, ¡pero cada vez más!
Vixed
Gracias por la aclaración sobre si necesita admitir IE o no. Ahora puedo pasar el tiempo para mostrarte.
Brett Parsons
-1

Si reorganiza los elementos, puede lograr esto.

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 fragmento

Deepu Reghunath
fuente
Gracias Deepu, pero debe ser pegajoso, no arreglado, ya que no sé dónde aparecerá la tabla.
Vixed
Explicación agregada en la pregunta.
Vixed
@Vixed He actualizado la solución
Deepu Reghunath
Lo vi, pero cambiaste toda la dom. Como dije, no puedo hacer eso.
Vixed
@Vixed Respondí tu pregunta, por favor, comprueba la solución que publiqué, hice la mía pegajosa.
darligee