iPhone에서 사이트의 이미지 영역이 제대로 표시되지 않아요. 왜 그런가요?

개발
1

자, 제 안드로이드 폰 3대(제조사 등 각각 다름)에서는 한 웹 페이지가 이렇게 보입니다(원래 모습):

androidex
androidex1080×2400 216 KB

제 파트너의 아이폰, 가족의 아이폰, 친구의 아이폰에서는 이렇게 보입니다:

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

그래서 왜 모든 아이폰에서는 이미지가 제대로 위치되지 않는 것처럼 보이지만, 여러 안드로이드 폰에서는 정상적으로 보이나요? 어떻게 수정해야 할까요? 지금까지 총 30시간 정도 이 문제로 고생하고 있습니다. :upside_down_face: 이상한 점은, 인스펙트 엘리먼트(Inspect Element)에서도 몇 가지 아이폰 프리셋에서는 정상적으로 표시되는데, 실제 기기에서는 그렇지 않다는 것입니다…

2

랜딩 페이지 플러그인은 거의 2년 동안 유지보수가 되지 않았습니다. 사용하기를 권하지 않습니다.

거기서 무슨 일이 일어나고 있는지 정확히는 모르겠지만, 코드에 구문 오류가 몇 개 있습니다.

3

유지보수가 안 됐다는 게 무슨 뜻이야? 최근 @cabidop이 메인 브랜치로 병합된 3개 컴포넌트 모두에서 몇 가지 내용을 업데이트했거든… 혹시 다른 걸 의미한 거라면 모르겠지만 :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;
}