Solution 1 :

first: love the #mobilewrapperpleaseworkimsosickofcodingihavenoideawhatimdoinglol ID, think i have some of those myself…

I think the problem is in the absolute/relative placement of the title. It’s now inside of the scrollingwrapper. where it has no point being, it is not supposed to scroll.

So place .pricecontainermobile div outside the #scrollingwrapper, inside the #mobilewrapperpleaseworkimsosickofcodingihavenoideawhatimdoinglol and make that last one position:relative; (If possible in your layout).

I suspect the animation is pushing the title either outside the viewable space, or it triggers a placement bug in ios.

<div id="mobilewrapperpleaseworkimsosickofcodingihavenoideawhatimdoinglol">
    <div id="scrolling-wrapper">
      <div class="productcardfirst">
        <img src="images/.jpg" alt="." class="productimage1">
      </div>
      <div class="productcard">
        <img src="images/.jpg" alt="." class="productimage1">
      </div>
      <div class="productcardlast">
        <img src="images/.jpg" alt="." class="productimage1">
      </div>
      <div class="productcardlastmobile">
        <img src="images/.jpg" alt="." class="productimage1">
      </div>
      <div class="productcardtext">
        <img src="images/.jpg" alt="." class="productimage1">
      </div>

    </div>
  <div class="pricecontainermobile">
        <h1>TITLE</h1>
  </div>

I made the code work without the portrait exception,i advice you do the same, fix it on desktop and then test again on ios…

body {
  background: black;
}

.pricecontainermobile {
 
}

*{border:1px #fc0 dotted;}

#horizontalproductcontainer {
  z-index: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

#mobilewrapperpleaseworkimsosickofcodingihavenoideawhatimdoinglol {
  z-index: 0;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

#scrolling-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  text-align: center;
  margin: 0 auto;
  height: 100%;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.productcardfirst {
  display: inline-block;
  position: relative;
  height: 60%;
  width: 40%;
  top: 0%;
  transform: translateY(-50%);
  animation-name: productslide;
  animation-duration: 1.1s;
  animation-delay: .5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  -webkit-animation-name: productslide;
  -webkit-animation-duration: 1.1s;
  -webkit-animation-delay: .5s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -moz-animation-name: productslide;
  -moz-animation-duration: 1.1s;
  -moz-animation-delay: .5s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: both;
  -o-animation-name: productslide;
  -o-animation-duration: 1.1s;
  -o-animation-delay: .5s;
  -o-animation-timing-function: ease-in-out;
  -o-animation-fill-mode: both;
}

@keyframes productslide {
  0% {
    margin-left: -50.5%;
  }

  100% {
    margin-left: 30%;
  }
}

@keyframes productslidemobile {
  0% {
    margin-left: -271%;
  }

  100% {
    margin-left: 6%;
  }
}

.productcardtext {
  display: none;
  position: relative;
  height: 60%;
  width: 40%;
  top: 50.6%;
  transform: translateY(-50%);
}

.productcard {
  display: inline-block;
  position: relative;
  height: 60%;
  width: 40%;
  top: 50.6%;
  transform: translateY(-50%);
}

.productcardlast {
  display: inline-block;
  position: relative;
  height: 60%;
  width: 40%;
  top: 50.6%;
  transform: translateY(-50%);
  margin-right: 30%;
}

.productcardlastmobile {
  display: none;
  position: relative;
  height: 60%;
  width: 40%;
  top: 50.6%;
  transform: translateY(-50%);
}

.productcard img,
.productcardonly img,
.productcardfirst img,
.productcardlast img {
  height: 100%;
  width: auto;
}

@media screen  {
  #scrolling-wrapper::-webkit-scrollbar {
    display: none;
  }

  .pricecontainermobile {
    display: block;
    position: absolute;
    width: 100%;
    border:20px;
z-index:10;
bottom:0px;
transform:translateY(calc(100% - 5px));  /* push title underneath the bottom line */
    margin: 0 auto;
  }
  
  
.itemcontainer{
position:relative;
}

  .pricecontainermobile>h1 {
    display: block;
    font-family: neue-haas-grotesk-text, sans-serif;
    color: white;
    font-weight: 500;
    font-style: normal;
    list-style: none;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    top: 0;
  }

  #mobilewrapperpleaseworkimsosickofcodingihavenoideawhatimdoinglol {
    z-index: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: auto;

  }
  
  .productimage1{
    width:88%!important; /* added the 88% you mentioned */
  }

  #scrolling-wrapper {
    height: auto;
    max-height:90vh;
  }

  .productcard {
    top: 0;
    transform: none;
    width: 88%;
    padding-right: 3%;
    height: auto;
  }

  .productcardlastmobile {
    display: inline-block;
    top: 0;
    transform: none;
    width: 88%;
    padding-right: 3%;
    height: auto;
  }

  .productcardtext {
    display: inline-block;
    top: 0;
    transform: none;
    width: 88%;
    margin-right: 6%;
    height: auto;
    position: relative;
  }

  .productcardfirst {
    top: 0;
    transform: none;
    margin-left: 6%;
    padding-right: 3%;
    width: 88%;
    height: auto;
    animation-name: productslidemobile;
    animation-duration: 1.1s;
    animation-delay: .5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    -webkit-animation-name: productslidemobile;
    -webkit-animation-duration: 1.1s;
    -webkit-animation-delay: .5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    -moz-animation-name: productslidemobile;
    -moz-animation-duration: 1.1s;
    -moz-animation-delay: .5s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-fill-mode: both;
    -o-animation-name: productslidemobile;
    -o-animation-duration: 1.1s;
    -o-animation-delay: .5s;
    -o-animation-timing-function: ease-in-out;
    -o-animation-fill-mode: both;
  }

  .productcardlast {
    display: none;
  }

  .productcard img,
  .productcardonly img,
  .productcardfirst img,
  .productcardtext img,
  .productcardlastmobile img {
    max-width: 100%;
    max-height:100%;
  }
}
<body>

    <div id="horizontalproductcontainer">
      <div id="mobilewrapperpleaseworkimsosickofcodingihavenoideawhatimdoinglol">
      <div class="itemcontainer"><!-- extra container div just to hold your title -->
        <div id="scrolling-wrapper">
          <div class="productcardfirst">
            <img src="https://via.placeholder.com/150" alt="." class="productimage1" />
          </div>
          <div class="productcard">
            <img src="https://via.placeholder.com/150" alt="." class="productimage1" />
          </div>
          <div class="productcardlast">
            <img src="https://via.placeholder.com/150" alt="." class="productimage1" />
          </div>
          <div class="productcardlastmobile">
            <img src="https://via.placeholder.com/150" alt="." class="productimage1" />
          </div>
          <div class="productcardtext">
            <img src="https://via.placeholder.com/150" alt="." class="productimage1" />
          </div>
        </div> <!-- end of scrolcontainer -->
        
        <!-- text container-->
        <div class="pricecontainermobile">
         <h1>TITLE</h1>
        </div>
        <!-- /text container -->
        </div>
         <!-- ^ end of extra container that's just sitting here containing the scrollconatiner -->
      </div>
     

    </div>

  </body>

Solution 2 :

Please try this css:
-Set @media all and set max-width.

 @media all and (max-width: 900px) and (orientation: portrait)
.pricecontainermobile>h1 {
   display: block;
   font-family: neue-haas-grotesk-text, sans-serif;
   color: white;
   font-weight: 500;
   font-style: normal;
   list-style: none;
   text-align: center;
   text-decoration: none;
   font-size: 13px;
   top: 0;
}

Problem :

CODE MUST BE VIEWED IN PORTRAIT MODE ON A MOBILE DEVICE TO REPLICATE THE ISSUE

Example of the issue: https://imgur.com/a/aaGnb1m

I have a horizontally scrolling container with images and below these images I have information about them as well as a buy button (I’ve removed the buy button and reduced this information in the example to only include ‘TITLE’ to simplify debugging). I’ve used CSS to animate the margin-left of the first image which essentially creates an effect where it flys through all the images and lands on the first one. By using developer mode on Safari / Chrome / Firefox etc. to test the code on portrait orientations, it has worked exactly as it should. The problem is, for some reason when I upload the page to my server and view the site on a mobile device like an iPhone for example, as soon as the animation begins, all of the information below the images vanishes. I’m not able to replicate this on a computer using developer mode / responsive design modes because it is only occurring on real mobile devices… extremely strange, I’ve never heard of anything like it nor have I been able to find any articles on it.

It may seem that an easy solution would be to simply create a separate fixed positioned div to house the information below the images, but this is not an option because I need the information to be positioned relative to the images based on the images’ responsive widths and corresponding heights. Since it does work correctly using responsive design mode on a computer in portrait orientation, I would imagine that it should be possible to also work correctly on real mobile devices.

ALSO I’ve tried this on my phone both on the mobile Chrome app and on Safari, the information vanishes on both.

TO CLARIFY, the information should be not shown when the device is in landscape mode. The issue is not that the information disappears on mobile devices in landscape mode, the problem is that it disappears on mobile devices while they are in portrait mode… making this issue quite confusing because the disappearance is not being reproduced when tested on computers using a responsive design mode.

UPDATE It appears this issue is only happening on apple devices…

Here is the JSFiddle featuring the code (keep in mind that the issue is not occurring on computers though): https://jsfiddle.net/ob7fmvdc/

Here is the code:

  <body>

    <div id="horizontalproductcontainer">
      <div id="mobilewrapperpleaseworkimsosickofcodingihavenoideawhatimdoinglol">
        <div id="scrolling-wrapper">
          <div class="productcardfirst">
            <img src="images/.jpg" alt="." class="productimage1" />
          </div>
          <div class="productcard">
            <img src="images/.jpg" alt="." class="productimage1" />
          </div>
          <div class="productcardlast">
            <img src="images/.jpg" alt="." class="productimage1" />
          </div>
          <div class="productcardlastmobile">
            <img src="images/.jpg" alt="." class="productimage1" />
          </div>
          <div class="productcardtext">
            <img src="images/.jpg" alt="." class="productimage1" />
          </div>
          <div class="pricecontainermobile">
            <h1>TITLE</h1>
          </div>
        </div>
      </div>
    </div>

  </body>

body {
  background: black;
}

.pricecontainermobile {
  display: none;
}

#horizontalproductcontainer {
  z-index: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

#mobilewrapperpleaseworkimsosickofcodingihavenoideawhatimdoinglol {
  z-index: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

#scrolling-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  text-align: center;
  margin: 0 auto;
  height: 100%;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.productcardfirst {
  display: inline-block;
  position: relative;
  height: 60%;
  width: 40%;
  top: 50.6%;
  transform: translateY(-50%);
  animation-name: productslide;
  animation-duration: 1.1s;
  animation-delay: .5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  -webkit-animation-name: productslide;
  -webkit-animation-duration: 1.1s;
  -webkit-animation-delay: .5s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -moz-animation-name: productslide;
  -moz-animation-duration: 1.1s;
  -moz-animation-delay: .5s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: both;
  -o-animation-name: productslide;
  -o-animation-duration: 1.1s;
  -o-animation-delay: .5s;
  -o-animation-timing-function: ease-in-out;
  -o-animation-fill-mode: both;
}

@keyframes productslide {
  0% {
    margin-left: -50.5%;
  }

  100% {
    margin-left: 30%;
  }
}

@keyframes productslidemobile {
  0% {
    margin-left: -271%;
  }

  100% {
    margin-left: 6%;
  }
}

.productcardtext {
  display: none;
  position: relative;
  height: 60%;
  width: 40%;
  top: 50.6%;
  transform: translateY(-50%);
}

.productcard {
  display: inline-block;
  position: relative;
  height: 60%;
  width: 40%;
  top: 50.6%;
  transform: translateY(-50%);
}

.productcardlast {
  display: inline-block;
  position: relative;
  height: 60%;
  width: 40%;
  top: 50.6%;
  transform: translateY(-50%);
  margin-right: 30%;
}

.productcardlastmobile {
  display: none;
  position: relative;
  height: 60%;
  width: 40%;
  top: 50.6%;
  transform: translateY(-50%);
}

.productcard img,
.productcardonly img,
.productcardfirst img,
.productcardlast img {
  height: 100%;
  width: auto;
}

@media screen and (orientation: portrait) {
  #scrolling-wrapper::-webkit-scrollbar {
    display: none;
  }

  .pricecontainermobile {
    display: block;
    position: absolute;
    width: 100%;
    margin: 0 auto;
  }

  .pricecontainermobile>h1 {
    display: block;
    font-family: neue-haas-grotesk-text, sans-serif;
    color: white;
    font-weight: 500;
    font-style: normal;
    list-style: none;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    top: 0;
  }

  #mobilewrapperpleaseworkimsosickofcodingihavenoideawhatimdoinglol {
    z-index: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    margin-top: -97px;
  }

  #scrolling-wrapper {
    height: auto;
  }

  .productcard {
    top: 0;
    transform: none;
    width: 88%;
    padding-right: 3%;
    height: auto;
  }

  .productcardlastmobile {
    display: inline-block;
    top: 0;
    transform: none;
    width: 88%;
    padding-right: 3%;
    height: auto;
  }

  .productcardtext {
    display: inline-block;
    top: 0;
    transform: none;
    width: 88%;
    margin-right: 6%;
    height: auto;
    position: relative;
  }

  .productcardfirst {
    top: 0;
    transform: none;
    margin-left: 6%;
    padding-right: 3%;
    width: 88%;
    height: auto;
    animation-name: productslidemobile;
    animation-duration: 1.1s;
    animation-delay: .5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    -webkit-animation-name: productslidemobile;
    -webkit-animation-duration: 1.1s;
    -webkit-animation-delay: .5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    -moz-animation-name: productslidemobile;
    -moz-animation-duration: 1.1s;
    -moz-animation-delay: .5s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-fill-mode: both;
    -o-animation-name: productslidemobile;
    -o-animation-duration: 1.1s;
    -o-animation-delay: .5s;
    -o-animation-timing-function: ease-in-out;
    -o-animation-fill-mode: both;
  }

  .productcardlast {
    display: none;
  }

  .productcard img,
  .productcardonly img,
  .productcardfirst img,
  .productcardtext img,
  .productcardlastmobile img {
    width: 100%;
    height: auto;
  }
}

Comments

Comment posted by lawrence-witt

I don’t think you’re going to get much help with this without a decent quality (i.e. less complicated), properly reproducible example.There’s so much superfluous and browser specific CSS here that it’s going to take a lot to pinpoint exactly what the issue is. You should replace the broken image links with something concrete for a start. For what it’s worth, I’ve got a version running in codepen (which is more mobile friendly) where the title shows on mobile browsers but the animation is broken.

Comment posted by codepen.io/njstic00/pen/MWaGJKx

Could I see your working codepen? I’ve made a codepen (

Comment posted by here you go

It’s exactly the same as your code but

Comment posted by SMAKSS

I didn’t get you well enough here. There is a fixed content below all of your images and they may go on screen rotation. So What do you want exactly, you just want to know why is it gonna disappear like this?

Comment posted by John Smith

@lawrence-witt Using your codepen, the information is still disappearing for me in chrome and safari on an iPhone.

Comment posted by John Smith

Thank you for this! The information no longer disappears on mobile which is great. The only problem now is that it’s messed up the layout I needed to stay the same. Right now the information is just being position with that bottom 10% style, but I need it to be positioned directly below the images on all viewports like it was previously… is this possible / how would I go about doing this?

Comment posted by Rmaxx

it depends on what you want, are all the images the same proportions, or scaled to the max-height of the scrollcontainer?… i would scale the images to the max-height of the container and position the text outside, just below the container. i updated the example again with some outlines and put the text even lower, but you will see what i mean.

Comment posted by John Smith

No, I can’t size them according to their height, all the images are set to be 88% width (they’re all squares) and I need the information to be directly underneath these images on all viewports, that’s why I had to use the position absolute / relative. Would it be possible to do absolute / relative again with the new html markup you suggested?

Comment posted by Rmaxx

Yes np, ill update the code again tomorrow, dont have my laptop right now. all images being equal dimensions will make it easier also

Comment posted by John Smith

You’re a genius. Thank you! Have a great day 🙂

Comment posted by imgur.com/a/VvSehVS

Same result… here is a screen recording:

Comment posted by codepen.io/Rishab2019/pen/pojKvVg

Hello, Please try this:

Comment posted by Rishab Tyagi

hide the html code in mobile to see this working.By hiding the html in codepen, it will be in portrait mode.

Comment posted by John Smith

Sorry, this codepen is still not working for me on iPhones in Safari or Chrome. The information is still disappearing at the start of the animation.

By

Leave a Reply

Your email address will not be published. Required fields are marked *