iPhone некорректно отображает область изображения на сайте. Почему?

Разработка
1

Итак, на трёх моих Android-смартфонах (разных брендов и т. д.) одна из моих веб-страниц отображается вот так (как и должно быть):

androidex
androidex1080×2400 216 KB

На iPhone моего партнёра, члена семьи и друга она выглядит так:

iphoneex
iphoneex1170×2532 242 KB

Мой мобильный SCSS-файл, отвечающий за отображение верхней области с изображением:

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

Так почему же на каждом iPhone изображение позиционируется неправильно, тогда как на нескольких Android-смартфонах всё работает? Как это исправить? Я уже застрял на этой проблеме в общей сложности около 30 часов. :upside_down_face: Странно ещё и то, что в моём Inspect Element всё отображается корректно на нескольких пресетах iPhone… но не на самих устройствах…

2

Плагин для целевых страниц не обновлялся почти 2 года. Я бы с осторожностью относился к его использованию.

Не уверен, что там происходит, но в вашем коде есть синтаксические ошибки.

3

Что ты имеешь в виду под тем, что это не поддерживается? Недавно я попросил @cabidop обновить кое-что во всех трёх компонентах, которые были слиты в основные ветки… если только ты не имел в виду что-то другое :open_mouth:

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

Синтаксические ошибки, да? Хм…

4

Привет :waving_hand:

Я не тестировал это, но, на мой взгляд, проблема вызвана свойством background-attachment: fixed;.

Код, который вы привели выше, выглядит так:

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

Это означает:

.title-container {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed; // это вызывает проблему
}

Необходимо ли в данном случае свойство background-attachment: fixed;?

Я имею в виду, что, вероятно, оно создаёт эффект параллакса. Однако это не лучшее решение для такой задачи, так как поддержка этого свойства не везде идеальна, и, возможно, для вашего случая оно вообще не требуется.

5

Ого, какой крутой сайт ты прислал, спасибо! Я попробую это, как только мой новый VPS загрузится и (надеюсь) полностью восстановит мой сайт!

6

Так, вы говорите, что нужно просто удалить часть fixed?

То есть у меня будет:

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

?