CSS 动画 (transform: rotateY(180deg);) 完美运行，除了 iOS 上的 Chrome

Posted 2023-03-06

【中文标题】CSS 动画 (transform: rotateY(180deg);) 完美运行，除了 iOS 上的 Chrome

【英文标题】：CSS animation (transform: rotateY(180deg);) works perfectly except in Chrome on iOS

【发布时间】：2021-10-06 18:22:33

【问题描述】：

老用户，第一次发帖。

动画在 PC 和 iPhone firefox/Safari 上完美运行，但在 iPhone Chrome 上却不行。 （最新）。

动画似乎只是在动画持续时间后捕捉到结束位置。我确实让它工作了一段时间，但我认为这是因为它缓存了我的 CSS 的旧版本。我不确定哪一个或什么不同。重点是我知道它可以工作。

非常感谢任何帮助。我尽我所能清理了代码。工作代码到处都有 cmets。代码还有一些内容，但这是它的核心。

同时运行 Bootstrap4 以获取信息。

$(".flip-card-inner").on('click mouseenter', function () 
    // $(this).css("animation-play-state", "initial"); // pause Y axis rotate
    // $(this).css("animation-play-state", "paused");

    $("div.link").each(function(index) 
    $(this).delay(150*index).slideDown("fast");

    $(".flip-card-inner").addClass('fliptoback');


    );
);

body 
  height:100vh; 
  background-color: #3a4757;
  background-image: url("img/grey_wash_wall.png");
  background-blend-mode: hard-light;
  background-size: 25%;


.flip-card 
  background-color: transparent;
  width: 100%;
  height: 200px;
  border-radius: .7rem ;
  border-color: black;
  -webkit-perspective: 500px;
  perspective: 500px;   


.flip-card-inner 
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: -webkit-transform; 
    transition: transform;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;


.flip-card-front, .flip-card-back 
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;


.flip-card-front 
  background-color: #181E25;
  background-image: url("img/brushed.jpg");
  background-blend-mode: multiply;
  background-size:25%;
  border-radius: .7rem ;
  border-color: #181E25;
  color: white;
 
  
  /* Style the back side */
.flip-card-back 
    background-color: #181E25;
    background-image: url("img/brushed.jpg");
    background-blend-mode: multiply;
    background-size:25%;
    border-radius: .7rem ;
    border-color: #181E25;
    color: white;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    

.fliptoback
  animation-name: yaxis;
  animation-duration: .5s;
  animation-fill-mode: forwards; 


@keyframes yaxis 
  from   
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
 
  to 
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-card">
  <div class=" flip-card-inner" >
    <div class=" flip-card-front" >
      <p>this is the front</p>
    </div>
    <div class=" flip-card-back" >
      <p>this is the back</p>
    </div>
  </div>
</div>
<div class="brandbox">
<h3 class="text-center text-light font-weight-light mt-3 text-uppercase">BRAND</h3>

        </div>
    
<div class="link text-light border border-light text-uppercase">
            Website
</div>

【问题讨论】：

我认为有一种方法可以刷新禁用缓存的移动页面，顺便说一句

【参考方案1】：

重新启动 Chrome。现在工作正常。我想尖叫。