Div исчезает ТОЛЬКО на мобильных устройствах в начале анимации CSS - PullRequest
Новая
       0

Div исчезает ТОЛЬКО на мобильных устройствах в начале анимации CSS

2 голосов
/ 07 мая 2020

КОД ДОЛЖЕН ПРОСМОТРЕТЬ В РЕЖИМЕ ПОРТРЕТА НА МОБИЛЬНОМ УСТРОЙСТВЕ, ЧТОБЫ ПОВТОРИТЬ ВЫПУСК

Пример ошибки: https://imgur.com/a/aaGnb1m

У меня есть горизонтально прокручивающийся контейнер с изображениями, и под этими изображениями у меня есть информация о них, а также кнопка покупки (я удалил кнопку покупки и уменьшил эту информацию в примере, чтобы включить только «TITLE» для упрощения отладки). Я использовал CSS для анимации левого поля первого изображения, что по сути создает эффект, когда он проходит через все изображения и приземляется на первом. Используя режим разработчика в Safari / Chrome / Firefox et c. чтобы протестировать код в портретной ориентации, он сработал именно так, как должен. Проблема в том, что по какой-то причине, когда я загружаю страницу на свой сервер и просматриваю сайт на мобильном устройстве, например iPhone, как только начинается анимация, вся информация под изображениями исчезает. Я не могу воспроизвести это на компьютере, используя режим разработчика / режимы адаптивного дизайна, потому что это происходит только на реальных мобильных устройствах ... чрезвычайно странно, я никогда не слышал о чем-либо подобном и не мог найти ничего статьи об этом.

Может показаться, что простым решением было бы просто создать отдельный фиксированно позиционируемый div для размещения информации под изображениями, но это не вариант, потому что мне нужно, чтобы информация располагалась относительно к изображениям на основе их ширины и соответствующей высоты. Поскольку он правильно работает в режиме адаптивного дизайна на компьютере в портретной ориентации, я могу предположить, что он также должен правильно работать на реальных мобильных устройствах.

ТАКЖЕ Я пробовал это на моем телефоне как в мобильном приложении Chrome, так и в Safari, информация исчезает в обоих.

ДЛЯ УТВЕРЖДЕНИЯ , информация не должна отображаться, когда устройство находится в альбомном режиме . Проблема не в том, что информация исчезает на мобильных устройствах в альбомном режиме, проблема в том, что она исчезает на мобильных устройствах, когда они находятся в режиме портрет ... что делает эту проблему довольно запутанной, потому что исчезновение не происходит воспроизводится при тестировании на компьютерах в режиме адаптивного дизайна.

ОБНОВЛЕНИЕ Похоже, эта проблема возникает только на устройствах Apple ...

Вот JSFiddle с кодом (имейте в виду, что проблема не возникает на компьютеры хотя): https://jsfiddle.net/ob7fmvdc/

Вот код: 

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

Ответы [ 2 ]

2 голосов
/ 11 мая 2020

во-первых: мне нравится идентификатор #mobilewrapperpleaseworkimsosickofcodingihavenoideawhatimdoinglol, думаю, у меня есть некоторые из них ...

Я думаю, что проблема в абсолютном / относительном размещении заголовка. Теперь он внутри скролл-обертки. там, где это не имеет смысла, он не должен прокручиваться.

Итак, поместите div .pricecontainermobile вне #scrollingwrapper, внутри #mobilewrapperpleaseworkimsosickofcodingihavenoideawhatimdoinglol и сделайте последнюю позицию: relative; (Если это возможно в вашем макете).

Я подозреваю, что анимация выталкивает заголовок либо за пределы видимого пространства, либо вызывает ошибку размещения в 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>

Я сделал код работает без исключения портрета, я советую вам сделать то же самое, исправить его на рабочем столе, а затем снова протестировать на 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>

0 голосов
/ 10 мая 2020

Попробуйте это css: -Set @ media all и установите 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...