iPhone non mostra correttamente l'area dell'immagine sul sito. Perché?

Sviluppatore
1

Quindi, su 3 dei miei telefoni Android (marche diverse, ecc.), una delle mie pagine web appare così (come dovrebbe essere):

androidex
androidex1080×2400 216 KB

Sul mio iPhone, sull’iPhone di un membro della famiglia e sull’iPhone di un amico, appare così:

iphoneex
iphoneex1170×2532 242 KB

Il mio file SCSS mobile che esegue il rendering dell’area dell’immagine superiore è:

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

Quindi, perché su ogni iPhone l’immagine non viene posizionata correttamente, ma lo è su più telefoni Android? Come posso risolvere questo problema? Sono bloccato da circa 30 ore in totale. :faccina_sottosopra: La cosa strana è anche che, nel mio Ispeziona Elemento, viene visualizzato correttamente anche su un paio di preset di iPhone che ha… ma non sui loro dispositivi reali…

2

Il plugin delle landing page non viene mantenuto da quasi 2 anni. Sarei cauto nell’usarlo.

Non sono sicuro di cosa stia succedendo, ma ci sono alcuni errori di sintassi nel tuo codice.

3

Cosa intendi dire con “non è stato mantenuto”? Di recente ho fatto aggiornare alcune cose a @cabidop su tutti e 3 i componenti che sono stati uniti ai branch principali… a meno che tu non intendessi qualcos’altro :open_mouth:

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

Errori di sintassi, eh? Hmm

4

Ciao :waving_hand:

Non l’ho testato, ma mi sembra che sia causato da background-attachment: fixed;

Nel codice che hai condiviso sopra c’è:

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

Il che significa:

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

È necessario background-attachment: fixed; in questo caso?

Voglio dire, penso che crei una specie di effetto parallasse. Ma questa non è la soluzione migliore per quello… dato che non è molto supportato e forse non necessario per il tuo caso d’uso.

1 Mi Piace
5

Oh wow, che bel sito web che hai linkato, grazie. Ci proverò non appena il mio nuovo VPS si avvierà e (sperando) ripristinerà completamente il mio sito!

6

Quindi, stai dicendo di eliminare solo la parte fixed?

Quindi avrei:

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

?