iPhone : problème d'affichage de la zone image sur le site. Pourquoi ?

Dev
1

Alors, sur 3 de mes téléphones Android (marques différentes, etc.), l’une de mes pages web ressemble à ceci (comme elle est censée être) :

androidex
androidex1080×2400 216 KB

Sur l’iPhone de ma partenaire, l’iPhone d’un membre de ma famille et l’iPhone d’un ami, cela ressemble à ceci :

iphoneex
iphoneex1170×2532 242 KB

Mon fichier SCSS mobile qui rend la zone de l’image supérieure est :

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;
      }
    }
  }
}

Alors, pourquoi sur tous les iPhones, l’image ne semble-t-elle pas être correctement positionnée, alors qu’elle l’est sur plusieurs téléphones Android ? Comment puis-je résoudre ce problème ? Je suis bloqué dessus depuis 30 heures au total maintenant. :upside_down_face: Chose étrange, aussi, sur mon outil d’inspection d’éléments, cela s’affiche correctement là aussi sur quelques préréglages d’iPhone qu’il propose… mais pas sur leurs appareils réels…

2

Le plugin landing pages n’a pas été maintenu depuis près de 2 ans. Je me méfierais de l’utiliser.

Je ne suis pas sûr de ce qui se passe, mais vous avez des erreurs de syntaxe dans votre code.

3

Qu’entends-tu par « il n’a pas été maintenu » ? J’ai récemment demandé à @cabidop de mettre à jour certaines choses sur les 3 composants qui ont été fusionnés dans les branches principales… à moins que tu ne veuilles dire autre chose :open_mouth:

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

Des erreurs de syntaxe, hein ? Hmmmmm

4

Bonjour :waving_hand:

Je ne l’ai pas testé, mais il me semble que cela est causé par background-attachment: fixed;

Le code que vous avez partagé ci-dessus contient :

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

Ce qui signifie :

.title-container {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed; // cela cause le problème
}

Est-ce que background-attachment: fixed; est nécessaire dans ce cas ?

Je veux dire, je pense que cela crée une sorte d’effet de parallaxe. Mais ce n’est pas la meilleure solution pour cela… car ce n’est pas très bien pris en charge et peut-être pas nécessaire pour votre cas d’utilisation.

1 « J'aime »
5

Oh wow, c’est un site web vraiment cool que tu as partagé, merci. J’essaierai ça dès que mon nouveau VPS démarrera et (espérons-le) aura entièrement restauré mon site !

6

Vous voulez donc que je supprime la partie fixed ?

J’aurais donc :

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

?