# iPhone : problème d'affichage de la zone image sur le site. Pourquoi ?
**URL:** https://meta.discourse.org/t/iphone-not-properly-showing-image-area-on-site-why/301963
**Category:** Development
**Tags:** css
**Created:** [Avril 1, 2024, 10:50 UTC](https://meta.discourse.org/t/iphone-not-properly-showing-image-area-on-site-why/301963 "2024-04-01T22:50:59Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@45thj5ej](https://meta.discourse.org/u/45thj5ej)
#### Post date: [Avril 1, 2024, 10:50 UTC](https://meta.discourse.org/t/iphone-not-properly-showing-image-area-on-site-why/301963/1 "2024-04-01T22:50:59Z")
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) :
Sur l’iPhone de ma partenaire, l’iPhone d’un membre de ma famille et l’iPhone d’un ami, cela ressemble à ceci :
Mon fichier SCSS mobile qui rend la zone de l’image supérieure est :
```plaintext
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. 🙃 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…
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [Avril 1, 2024, 11:19 UTC](https://meta.discourse.org/t/iphone-not-properly-showing-image-area-on-site-why/301963/2 "2024-04-01T23:19:33Z")
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.
---
### Author:  [@45thj5ej](https://meta.discourse.org/u/45thj5ej)
#### Post date: [Avril 1, 2024, 11:22 UTC](https://meta.discourse.org/t/iphone-not-properly-showing-image-area-on-site-why/301963/3 "2024-04-01T23:22:42Z")
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](https://github.com/paviliondev/discourse-landing-pages)
> [GitHub - paviliondev/blog-landing-pages](https://github.com/paviliondev/blog-landing-pages)
> [GitHub - paviliondev/blog-landing-theme](https://github.com/paviliondev/blog-landing-theme)
Des erreurs de syntaxe, hein ? Hmmmmm
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [Avril 2, 2024, 4:02 UTC](https://meta.discourse.org/t/iphone-not-properly-showing-image-area-on-site-why/301963/4 "2024-04-02T04:02:39Z")
Bonjour 👋
Je ne l’ai pas testé, mais il me semble que cela est causé par `background-attachment: fixed;`
> **[CSS background-attachment | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/background-attachment)**
>
> "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
Le code que vous avez partagé ci-dessus contient :
```scss
.title-container {
background: no-repeat center/cover fixed;
}
```
Ce qui signifie :
```scss
.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.
---
### Author:  [@45thj5ej](https://meta.discourse.org/u/45thj5ej)
#### Post date: [Avril 2, 2024, 4:13 UTC](https://meta.discourse.org/t/iphone-not-properly-showing-image-area-on-site-why/301963/5 "2024-04-02T04:13:08Z")
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 !
---
### Author:  [@45thj5ej](https://meta.discourse.org/u/45thj5ej)
#### Post date: [Avril 2, 2024, 5:02 UTC](https://meta.discourse.org/t/iphone-not-properly-showing-image-area-on-site-why/301963/6 "2024-04-02T05:02:37Z")
Vous voulez donc que je supprime la partie `fixed` ?
J’aurais donc :
```plaintext
.title-container {
background: no-repeat center/cover;
}
```
?