Lottie动画在iOS端位置偏移 Windows/Android运行正常问题求教

iOS端Lottie位置偏移修复方案 #

• 给lottie-player元素添加显式定位与硬件加速属性，解决Safari默认排版偏差与锁屏重绘异常：

lottie-player {
  position: relative;
  top: 0;
  left: 0;
  transform: translate3d(0, 0, 0);
}

• 新增页面可见性监听事件，解锁后强制触发Lottie容器重排：

document.addEventListener('visibilitychange', () => {
  const lottie = document.querySelector('lottie-player');
  if (!document.hidden && lottie) {
    void lottie.offsetHeight;
  }
});

播放状态切换功能实现 #

合并原有重复的点击事件绑定，新增状态控制逻辑：

• 定义播放状态变量区分点击行为
• 首次点击启动Lottie动画、播放Youtube、显示iframe
• 再次点击暂停Youtube、重置Lottie到首帧、隐藏iframe

完整可运行代码 #

<head>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>  
<script src="https://www.youtube.com/iframe_api"></script>
<script>
  let isPlaying = false;
  let lottiePlayer;
  let ytPlayer;
  let ytiframe;

  window.onload = function(){ 
    lottiePlayer = document.querySelector("lottie-player");
    ytiframe = document.getElementById('ytiframe');

    // 页面可见性监听，修复解锁偏移
    document.addEventListener('visibilitychange', () => {
      if (!document.hidden && lottiePlayer) {
        void lottiePlayer.offsetHeight;
      }
    });
  };

  // Youtube API初始化
  window.onYouTubeIframeAPIReady = function() {
    new YT.Player(document.querySelector('.video iframe'), {
      events: {
        onReady: function(e) {
          ytPlayer = e.target;
          // 绑定按钮点击事件
          document.querySelector('.start').addEventListener('click', function(e) {
            e.preventDefault();
            if (!isPlaying) {
              // 启动播放逻辑
              lottiePlayer.play();
              ytPlayer.playVideo();
              ytiframe.classList.add('fade');
              isPlaying = true;
            } else {
              // 停止重置逻辑
              ytPlayer.pauseVideo();
              lottiePlayer.stop();
              ytiframe.classList.remove('fade');
              isPlaying = false;
            }
          })
        }
      }
    })
  }
</script>
<style>
@-webkit-keyframes glowings {
  0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}
@-moz-keyframes glowings {
  0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
}
@-o-keyframes glowings {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}
@keyframes glowings {
  0% { background-color: #ffd300; box-shadow: 0 0 3px #ffde00; }
  50% { background-color: #ffd300; box-shadow: 0 0 40px #ffde00; }
  100% { background-color: #ffd300; box-shadow: 0 0 3px #ffde00; }
}
.btn-glow {
  -webkit-animation: glowings 1500ms infinite;
  -moz-animation: glowings 1500ms infinite;
  -o-animation: glowings 1500ms infinite;
  animation: glowings 1500ms infinite;
  color: rgb(163,5,0);
  position: absolute;
  bottom: 233px;
  left: 157px;
  width: 130px;
  height: 60px;
  transform: rotate(-0.5deg);
  background-color: rgba(208,207,207,0.72);
  border: 0px;
  font-weight: bold;
  z-index: 199!important;
}
.btn-glow:hover {
  -webkit-animation: glowings 0ms infinite;
  -moz-animation: glowings 0ms infinite;
  -o-animation: glowings 0ms infinite;
  animation: glowings 0ms infinite;
}
#ytiframe {
  -webkit-transition: opacity 3s ease-in-out;
  -moz-transition: opacity 3s ease-in-out;
  -ms-transition: opacity 3s ease-in-out;
  -o-transition: opacity 3s ease-in-out;
  opacity: 0;  
  width: 250px;
  float: none;
  margin: 0 auto;
}
#ytiframe.fade {
  opacity:.5;
}
.jukeboxcode{
  position: relative;
  bottom: -10px;
}
/* 新增Lottie修复样式 */
lottie-player {
  position: relative;
  top: 0;
  left: 0;
  transform: translate3d(0, 0, 0);
  z-index: 188; 
  width: 400px; 
  height: 550px;
}
</style>
</head>
<body data-rsssl=1>
<div class="jukeboxcode" style="height: 800px; width: 400px; background-color: rgba(25,254,1,0.14); ">
  <button id="fadebutton" class="start play btn-glow">INSERT COIN</button>
  <div id="ytiframe" class="video" >
    <iframe width="560" height="315" src="https://www.youtube.com/embed/MV_3Dpw-BRY?enablejsapi=1&playsinline=1"  frameborder="0" playsinline="1" allow="autoplay" ></iframe>
  </div>
  <lottie-player src="https://assets7.lottiefiles.com/packages/lf20_yc3xb5l6.json"  background="transparent"  speed="1"></lottie-player>
</div>
</body>

内容的提问来源于stack exchange，提问作者allegri