javascript - The image has wrong displays on Iphone - Stack Overflow

I am creating a website with parallax scroll effects but on Iphone the parallax images do not seems good it seems like they are of bad quality and incorrect cropping I tried to use <figure> but the issue stills the same result, also I tried to overwrite the images on mobiles to more adaptability this also do not works. Here is my current code:

    document.addEventListener("scroll", function() {
      const sections = document.querySelectorAll('.section-background');
      sections.forEach(section => {
        const img = section.querySelector('.parallax-img');
        const rect = section.getBoundingClientRect();
        const sectionHeight = section.offsetHeight;
        // Calculate progress (0 when the section is fully below, 1 when it's fully above)
        let progress = Math.min(Math.max(-rect.top / sectionHeight, 0), 1);
        // Map progress to translation from 0 to -sectionHeight
        const translateY = -progress * sectionHeight;
        img.style.transform = `translateY(${translateY}px)`;
      });
    });

.ah2 {
background: rgba(128,128,128,.5);
  font-size: 125px;  
      padding-top: 0.25em;
    font-size: 28pt !important;
    width: 60%
}
    .section-background {
      position: relative;
      height: 100vh;
      width: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    .parallax-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 200%; /* twice the section height ensures full coverage */
      object-fit: cover;
      z-index: -1;
      will-change: transform;
      margin: 0;
    }
      figure > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; /* twice the section height ensures full coverage */
      object-fit: cover;
      z-index: -1;
      will-change: transform;
    }

    <div class="section-background">
 <figure class="parallax-img">
   <img src=".jpg"></img>
 </figure>
        <div class="content">
            <h2 class="ah2">WHERE EXCEPTIONAL ENTERTAINMENT — MUSIC, THEATRE, THE ARTS AND INSPIRING LECTURES — ENRICHES OUR CULTURE.</h2>
        </div>
    </div>

    <div class="section-background">
 <figure class="parallax-img">
   <img className="parallax-img" src=".jpg"></img>
 </figure>
        <div class="content">
            <h2 class="ah2">WHERE SHARING A GOOD LAUGH HELPS BUILD FRIENDSHIPS THAT LAST A LIFETIME.</h2>
        </div>
    </div>

    <div class="section-background">
 <figure class="parallax-img">
   <img src=".jpg?itok=3GEJXlT6"></img>
 </figure>
        <div class="content">
            <h2 class="ah2">WHERE MUSIC UNDER THE REDWOODS CREATES A MAGIC SHARED WITH FRIENDS AND FAMILY.</h2>
        </div>
    </div>

I am creating a website with parallax scroll effects but on Iphone the parallax images do not seems good it seems like they are of bad quality and incorrect cropping I tried to use <figure> but the issue stills the same result, also I tried to overwrite the images on mobiles to more adaptability this also do not works. Here is my current code:

    document.addEventListener("scroll", function() {
      const sections = document.querySelectorAll('.section-background');
      sections.forEach(section => {
        const img = section.querySelector('.parallax-img');
        const rect = section.getBoundingClientRect();
        const sectionHeight = section.offsetHeight;
        // Calculate progress (0 when the section is fully below, 1 when it's fully above)
        let progress = Math.min(Math.max(-rect.top / sectionHeight, 0), 1);
        // Map progress to translation from 0 to -sectionHeight
        const translateY = -progress * sectionHeight;
        img.style.transform = `translateY(${translateY}px)`;
      });
    });

.ah2 {
background: rgba(128,128,128,.5);
  font-size: 125px;  
      padding-top: 0.25em;
    font-size: 28pt !important;
    width: 60%
}
    .section-background {
      position: relative;
      height: 100vh;
      width: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    .parallax-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 200%; /* twice the section height ensures full coverage */
      object-fit: cover;
      z-index: -1;
      will-change: transform;
      margin: 0;
    }
      figure > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; /* twice the section height ensures full coverage */
      object-fit: cover;
      z-index: -1;
      will-change: transform;
    }

    <div class="section-background">
 <figure class="parallax-img">
   <img src="https://a.travel-assets/findyours-php/viewfinder/images/res70/363000/363235-Nice.jpg"></img>
 </figure>
        <div class="content">
            <h2 class="ah2">WHERE EXCEPTIONAL ENTERTAINMENT — MUSIC, THEATRE, THE ARTS AND INSPIRING LECTURES — ENRICHES OUR CULTURE.</h2>
        </div>
    </div>

    <div class="section-background">
 <figure class="parallax-img">
   <img className="parallax-img" src="https://static.vecteezy/system/resources/thumbnails/040/890/255/small_2x/ai-generated-empty-wooden-table-on-the-natural-background-for-product-display-free-photo.jpg"></img>
 </figure>
        <div class="content">
            <h2 class="ah2">WHERE SHARING A GOOD LAUGH HELPS BUILD FRIENDSHIPS THAT LAST A LIFETIME.</h2>
        </div>
    </div>

    <div class="section-background">
 <figure class="parallax-img">
   <img src="https://smart-tourism-capital.ec.europa.eu/sites/default/files/styles/embed_large/public/2021-09/Nice2.jpg?itok=3GEJXlT6"></img>
 </figure>
        <div class="content">
            <h2 class="ah2">WHERE MUSIC UNDER THE REDWOODS CREATES A MAGIC SHARED WITH FRIENDS AND FAMILY.</h2>
        </div>
    </div>

Expected result

:

Current result

:

• javascript
• html
• css
• ios
• mobile-safari

Share Improve this question Follow edited Mar 4 at 3:48 Eliseo asked Mar 4 at 3:34 EliseoEliseo 6177 bronze badges 1

• Your snippet doesn’t seem to show the problem. What version of IOS are you testing on? – A Haworth Commented Mar 4 at 7:22

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

i just added some css properties to your existing css class which is of .section-background & .section-background img

as i added background-size , background-position and background-attachment properties to the .section-background class also display: none; to the img tag to hide the image if you are using background-image property

hope so it works as u expect

.section-background {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.section-background img {
  display: none;
}