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

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

我从这个问题中得到了什么 ： 如何获取绝对定位元素的左/右/上/下的实际值？ 。

以下是我的网站的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>

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

Answer 1

在在线查看站点的行为之后，我最好的选择是浏览器通过在不显示选项卡时不播放过渡的所有帧来优化CPU，并在再次显示选项卡时赶上当前帧，从而优化了CPU导致屏幕闪烁。

强化此理论的原因是该错误发生在Chrome上，而不是Firefox上。

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

Answer 2

我认为问题出在setTimeout和setInterval。 如果您切换到其他标签页，Chrome不会正确跟踪setTimeout和setInterval的计时器。 我想目的是为了提高浏览器的性能，但是在这种情况下，显然不是您想要的。 我认为Chrome小组不打算“解决”此问题。