Действительно загадочные проблемы с DOM в Chrome

Question

Имейте в виду, это будет чрезвычайно сложно объяснить, и я не могу показать много кода, потому что я не уверен, что хочу сбросить весь этот код разработки, который будет использоваться в крупной национальной сети. сайт.

У меня есть четыре тега LI, которые после $ (window) .load () клонируются в DIV, а затем высота DIV выбирается с помощью цикла $ .each (). Проблема, с которой я сталкиваюсь, заключается в том, что в большинстве браузеров на разных ОС высоты одинаковы, за исключением Chrome на Linux и Mac. Я уточню немного больше.

Каждый LI содержит некоторый текст и некоторые другие div, в основном только общее содержание. И я использую $ .contents (). Clone (), чтобы клонировать каждый LI и поместить его в DIV, где он по-разному оформлен. Вот как работает эта конкретная часть, и она не может измениться.

ОК, время кода jQuery:

$(window).load(function() {

    $('.carousel-thumb').each(function(i) {
        var $story = $(this).contents().clone();

        // Remove all <script> tags before appending, otherwise we're looking
        // for trouble
        $('script', $story).remove();

        $story.appendTo('#featured-story')
            .wrapAll('<div class="carousel-story" />');
    });

    // Fix the sizing on the featured story container
    $('.carousel-story').each(function(i) {
        console.log('story ' + i + ' = ' + $(this).height());
        if ($(this).height() > storyMaxHeight)
            storyMaxHeight = $(this).height();
    });
    /*$('.carousel-story').height(storyMaxHeight);
    $('#featured-story').height(storyMaxHeight);*/
});

Я отвечу на один потенциальный вопрос, который может возникнуть из-за этого. Что с удалением тегов скрипта? Оригинальные теги LI содержат различное содержимое, включая встроенные скрипты. Я заметил, что когда я клонировал этот контент, он привел к хаосу в структуре страницы. Не уверен, что сценарии выполнялись снова или что, но удаление сценариев (особенно если они уже были выполнены) решило проблему.

Теперь посмотрите на этот интересный кусочек. Этот рисунок содержит Windows Chrome слева и Linux Chrome справа. Обратите внимание, что Linux / Mac Chrome оба плохо себя ведут.

Разве это не странно? Во время выполнения скрипта высоты в Linux совершенно неверны. Тем не менее, после того, как все полностью сделано, и я вручную запрашиваю высоту третьего деления, он правильно сообщает о высоте! Тем не менее, поведение слева (правильно) демонстрируется Windows Chrome, а также Firefox на всех платформах, даже IE7.

Есть ли странная задержка в вызове clone ()? Клонирование группы контента занимает некоторое время, и сценарий jQuery продолжает выполняться и, следовательно, получает неправильную высоту? Есть ли способ сделать паузу, чтобы убедиться, что весь контент был клонирован правильно?

Спасибо. Я действительно тяну свои волосы над этим.

Answer 1

Очевидно, это ошибка в Chrome и Safari, которая появляется случайно. Эти браузеры иногда запускают функцию load () до того, как все изображения / медиа будут загружены. Один человек рекомендует это исправление / взломать:

jQuery(window).load(function(){
  if (jQuery.browser.safari && document.readyState != 'complete'){
    // chrome / safari will trigger load function before images are finished
    // check readystate in safari browser to ensure images are done loading
    setTimeout( arguments.callee, 100 );
    return;
  }
  // do things you want to do
});

Источник: http://javascript.livejournal.com/169501.html