当视图切换到其他浏览器选项卡时，网页javascript的行为会有所不同

在撰写标题时对不起我的英语，我已经尽力了。

现场网站： http ： //tt.fbcwinterretreat.org/请注意更好地了解发生了什么，我建议你减少窗户高度。

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

似乎问题来自这个function：

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：

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标签之前，我用它来使图像自动适应屏幕的高度

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

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