¿El iPhone no muestra correctamente el área de la imagen en el sitio. Por qué?

Desarrollador
1

Entonces, en 3 de mis teléfonos Android (diferentes marcas, etc.), una de mis páginas web se ve así (como se supone que debe ser):

androidex
androidex1080×2400 216 KB

En el iPhone de mi pareja, el iPhone de un miembro de la familia y el iPhone de un amigo, se ve así:

iphoneex
iphoneex1170×2532 242 KB

Mi archivo SCSS móvil que renderiza el área de la imagen superior es:

body.landing-page {
  &.blog {
    > .contents {
      max-width: 100%;
      width: 100%;
      display: block;
      padding: 1em;

      .page-first {
        display: none;
      }
    }
    .mobile-header .menu {
      background-color: #4a4a4a !important;
/*       height: min-content; */
    }
    
    .topic-list {
      grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
      padding: 2em 0 0 0;

      .topic-byline {
        .bull {
          padding: .2em .5em;
        }
      }
    }
  }

  .canvas {
    padding: 0.8em !important;
}

  .bull {
    display:none
    }

  &.blog-post {
    header {
      background-color: $secondary;
    }

    .container {
      width: 100%;
    }

    .post-container {
      width: 100%;
    }
    
    .title-container {
      background: no-repeat center/cover fixed;
      display: flex;
      flex-direction: column;
      min-height: 530px;
      max-height: 40%;
      justify-content: flex-end;
      align-items: center;

      .title {
        font-size: 2.0em !important;
        width: 100%;
        text-align: center;
/*         margin: 0 0 1em 0; */
      }

      .topic-byline {
        flex-direction: column;

        .bull {
          padding: .2em 1em;
        }
      }
    }

    img {
      max-width: 100%;
      height: auto;
    }
    
    .comment-container {
      .comment-heading h4 {
        text-align: center;
      }

      .comment-footer {
        padding: 0 2em;
        box-sizing: border-box;
        justify-content: center;
      }
    }
  }

  &.blog,
  &.blog-post {
    .btn-subscribe {
      padding: 0;

      .fixed-avatar {
        width: 60px;
        height: 60px;
      }
    }
  }
}

Entonces, ¿por qué en todos los iPhone la imagen no se posiciona correctamente, pero sí en varios teléfonos Android? ¿Cómo lo soluciono? Llevo atascado en esto unas 30 horas en total. :cara_decepcionada: Lo raro es que, también, en mi inspección de elementos, se muestra bien allí también en algunas configuraciones preestablecidas de iPhone… pero no en sus dispositivos reales…

2

El plugin de páginas de destino no se ha mantenido durante casi 2 años. Sería prudente no usarlo.

No estoy seguro de lo que está pasando, pero tienes algunos errores de sintaxis en tu código.

3

¿A qué te refieres con que no ha sido mantenido? Recientemente, @cabidop actualizó algunas cosas en los 3 componentes que se fusionaron en las ramas principales… a menos que te refieras a otra cosa :open_mouth:

GitHub - paviliondev/discourse-landing-pages: Adds landing pages to Discourse
GitHub - paviliondev/blog-landing-pages
GitHub - paviliondev/blog-landing-theme

Errores de sintaxis, ¿eh? Mmmmmm

4

Hola :waving_hand:

No lo he probado, pero me parece que lo causa background-attachment: fixed;

En el código que compartiste arriba hay:

.title-container {
  background: no-repeat center/cover fixed;
}

Lo que significa:

.title-container {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed; // esto causa el problema
}

¿Es background-attachment: fixed; necesario en este caso?

Quiero decir, creo que probablemente crea una especie de efecto parallax. Pero esta no es la mejor solución para eso… ya que no tiene mucho soporte y tal vez no sea necesario para tu caso de uso.

1 me gusta
5

Vaya, ese es un sitio web muy bueno que enlazaste, gracias. Probaré esto tan pronto como mi nuevo VPS arranque y (con suerte) ¡mi sitio se restaure por completo!

6

Entonces, ¿quieres decir que solo elimine la parte fixed?

¿Así que tendría:

.title-container {
  background: no-repeat center/cover;
}

?