Question

直播网站：http://tt.fbcwinterretreat.org/ 我正试图通过jQuery制作旋转木马效果。请注意，为了更好地了解发生的情况，您必须降低窗口高度。

问题是：如果你继续查看页面，轮播进展顺利，但如果你切换到另一个浏览器标签，等待几秒钟，然后切换回来，你会看到轮播被取代。您在其他浏览器标签上停留的时间越长，移位的次数就越多。

似乎问题来自这个功能：

function getRelativeClientRect(el) {
  var rect = el.getBoundingClientRect(),
      parentRect = el.offsetParent.getBoundingClientRect();
  return {
    bottom: parentRect.bottom - rect.bottom,
    height: rect.height,
    left: rect.left - parentRect.left,
    right: parentRect.right - rect.right,
    top: rect.top - parentRect.top,
    width: rect.width
  };
}

我从这个问题得到的：How do I get the actual values for left/right/top/bottom of an absolutely positioned element?。

以下是我网站的HTML和代码： HTML：

<div class='marquee-container'>
    <div class="image-container">
        <div class="image" style="background-image:url('images/1.jpg')"></div>
        <div class="image" style="background-image:url('images/2.jpg')"></div>
        <div class="image" style="background-image:url('images/3.jpg')"></div>
        <div class="image" style="background-image:url('images/4.jpg')"></div>
        <div class="image" style="background-image:url('images/5.jpg')"></div>
    </div>
</div>

CSS：

.marquee-container{position:relative;overflow:hidden}
.image-container{position:absolute;transition:all 1s ease;  display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
.image{float:left;background-size:cover;cursor:pointer}

JS：有两个相关的JS脚本，第一个位于关闭body标签之前，我用它来使图像自动适应屏幕的高度

<script>
        (function(){
            var width, height = true;

            function initHeader() {
            headerHeight = document.getElementById('rt-header')? document.getElementById('rt-header').getHeight():0;
                width = window.innerWidth;
                height = window.innerHeight - headerHeight;
                largeHeader = document.getElementById('rt-topfullwidth');
                largeHeader.style.height = height+'px';

                j('.marquee-container').height(height);
                j('.marquee-container .image').height(height);

            }

            // Main
            initHeader();
        })();
    </script>

seconde位于http://tt.fbcwinterretreat.org/templates/rt_chimera/js/custom.js，我用它来实现轮播效果。我知道它的可读性很低，所以我添加了一些评论。

Answer 1

在网上查看网站上的行为之后，我最好的选择是浏览器在选项卡不可见的情况下不播放转换的所有帧来优化CPU，并在选项卡变为可见时赶上当前帧再次，这导致屏幕上的闪烁。

这个理论强调的是，这个错误发生在Chrome上，而不是发生在Firefox上。

我认为解决此问题的可能解决方案是使用JavaScript而不是CSS实现动画......或者等待Chrome修复此问题。

Answer 2

我认为问题出在setTimeout和setInterval上。如果您切换到其他标签，则Chrome无法正确跟踪setTimeout和setInterval的计时器。我想这是为了提高浏览器的性能，但在这种情况下，它显然不是你想要的。我不认为Chrome团队打算修复＆＃39;这个。

切换浏览器选项卡时JavaScript动画不起作用

2 个答案: