iOS 13.5.1+ дисплей: нет ошибки преобразования поворота - PullRequest
Новая
       87

iOS 13.5.1+ дисплей: нет ошибки преобразования поворота

0 голосов
/ 06 августа 2020

чего я ожидал: 

click button
show div
rotate div to (6*360+angle ) (4.5s)
hide div
set div rotate angle to 0

приведенный ниже код хорошо работает на android и ios (версия системы <= 12), но застрял на ios (13.5.1 и 13.6) </p> 

<template>
  <div
    class="container"
  >
    <div
      v-show="display"
      :style="{ transform: angle }"
      class="demo-div"
    >Hey
    </div>

    <h1>expect: show div, rotate div. rotate angle({{ rotateA }}), hide div</h1>
    <div v-if="!unClickable">
      <h2 @click="onClick(0)">Same angle(bug)</h2>
      <h2 @click="onClick(60)">+60 angle</h2>
    </div>
  </div>
</template>

<script>
// rotate stuck on ios ( >=13.5.1 ) , works well on android and ios ( <= 12 )
export default {
  data() {
    return {
      unClickable: false,
      display: false,
      angle: 'rotate(0deg)',
      rotateA: 0
    }
  },
  methods: {
    onClick(deg) {
      if (this.unClickable) {
        return
      }
      this.unClickable = true
      this.display = true
      setTimeout(() => {
        // if rotate don't change the rotation will stucked
        this.rotateA = (this.rotateA + deg) % 360
        this.angle = `rotate(${(6 * 360 + this.rotateA)}deg)`
      }, 100)
      // change 100 to 1000 works well

      setTimeout(() => {
        this.angle = 'rotate(0deg)'
        this.display = false
        this.unClickable = false
      }, 5500)
    }
  }
}
</script>
<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

h2 {
  background-color: lightgrey;
  padding: 1em;
}

.demo-div {
  transition: transform ease-out 4.5s;
  width: 50vw;
  height: 50vh;
  background-color: lightblue;
}
</style>

какой-то тест, который я сделал

Возможно, это не проблема vue2, потому что я пытался изменить display:none css в чистом виде js, ошибка все еще существует.

Кнопка +60angle работает всегда, но кнопка same angle работает только в первый раз

Когда я меняю setTimeout со 100 на 1000. Работает, но ждать слишком долго.

Если всегда показывать этот div, он все равно работает.

Пробовал другой веб-браузер в ios

Я думаю, что это ios ошибка

онлайн-пример

https://codesandbox.io/s/naughty-nobel-42zc6

https://42zc6.csb.app/

...