Intereting Posts
Отключите регулятор громкости и кнопку отключения звука в видео HTML5. как избежать в шаблоне underscore javascript? JavaScript: выполнить ‘element.hasAttribute’, если undefined Набор математических команд с использованием MathJax для веб-страницы ноутбука IPython Изменение цвета текста при наведении на изображение Как запускать анимацию css как при прокрутке вниз, так и вверх iOS – css / js – Прокрутка прокрутки, но предотrotation прокрутки тела Угловое 2: динамически создавать divs Как я могу создавать HTML-страницы, которые автоматически корректируют свои изображения на разные размеры экрана для мобильных устройств? Как отключить событие onclick, как только это произойдет? Как создать PDF из HTML с помощью classов начальной загрузки CSS Запуск скриптов Python с помощью PHP exec () Высота и ширина стиля изображения не принимаются в почтовых сообщениях Outlook. Как я могу поместить элемент ввода в ту же строку, что и его метка? Как сохранить содержимое в UIWebView для более быстрой загрузки при следующем запуске?

Веб-страница javascript ведет себя по-разному, когда представление переключается на другую вкладку браузера

Извините за мой английский, когда я сочинил заголовок, я старался изо всех сил.

Живой сайт: http://tt.fbcwinterretreat.org/ Пожалуйста, обратите внимание, чтобы лучше понять, что происходит, я рекомендую вам уменьшить высоту windows.

Проблема заключается в следующем: если вы продолжаете смотреть на страницу, карусель идет хорошо, но если вы перейдете на другую вкладку браузера, подождите несколько секунд, а затем вернитесь назад, вы увидите, что карусель вытесняется. Чем дольше вы остаетесь на другой вкладке браузера, тем больше она смещается.

Похоже, проблема исходит из этой функции:

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

который я получил от этого вопроса SO: Как получить фактические значения для left / right / top / bottom абсолютно позиционированного элемента? ,

Ниже приведены 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, первый из которых находится перед закрытием тега тела, я использую его, чтобы изображения автоматически соответствовали высоте экрана

  (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 , я использую его для реализации эффекта карусели. Я знаю, что его читаемость низкая, поэтому я добавил несколько комментариев к ней.