Chrome - jQuery мерцание при изменении размера окна? (Mac, не в Safari и FF)

Question

Это странный вопрос, который беспокоит меня уже некоторое время.Я подозреваю, что это проблема, которая возникла только в последней версии, поскольку я только заметил это сейчас.

Я создал сайт для своего клиента, который работает с сеткой, учитывающей размер браузера, с точки зренияплавающие div и размер изображения.

Если вы откроете сайт здесь и здесь (ps еще не 'живы', просто отправьте его в корень) в Safari или FF и изменитеразмер вашего браузера, вы заметите, что он идеально сглаживает изображения, а размер шелковистый.

С Chrome это похоже на вечеринку IE6 в 2002 году ... она нервная и изображения даже не сглаживаются.Довольно разочарован, поскольку я люблю Chrome, и он, кажется, всегда побеждает остальных, когда дело доходит до этих деталей.

Я уверен, что это ошибка браузера, но я надеюсь, что профессионал jQuery может тамзнаю способ ограничения вывода Chromes.

С другой стороны, отправка Chrome-ошибки похожа на ввод сложного лабиринта, я понятия не имею, где правильно отправить такую ​​ошибку, любойзнаете, как это лучше всего сделать, чтобы привлечь к себе внимание?

Answer 1

Я могу помочь вам в этом.Я только что решил ту же проблему для своего сайта портфолио.Похоже, что Chrome немного впереди себя в этом.Не совсем уверен, что это ошибка, но я нашел исправление.

Когда вы изменяете размер окна просмотра, времени между получением ширины окна в функции и ее выполнением будет достаточно, чтобы создать реальное окно.размер чуть меньше математики, которую нужно сложить (4 столбца по 110,25 пикселей в окне шириной 440 пикселей).Этот дополнительный пиксель приводит к переносу столбца.

Итак, как исправить?

На контейнере с оберткой, максимальная ширина которого вокруг столбцов, задайте ширину родительского элемента.Делая это также при изменении размера (и не просто захватывая размер окна, а устанавливая ширину столбца), он позволяет математике догонять правильный размер окна.

Вот скрипка JS, демонстрирующая:1009 *http://jsfiddle.net/Lr2Fh/

JS:

 $(function(){
  var maxWidth = $(window).outerWidth();

  function totalWindow(){
    $maxWidth = $(window).outerWidth();
    $('#columns').css({
      'width' : $maxWidth + 'px'
    });
  }

  function resizeColumns(){
    var $col = $('.col');
    var $numCol = $col.length;
    $maxWidth = $(window).outerWidth();
    var colSize = $maxWidth / $numCol;

    $col.css({
      'width' : colSize + 'px'
    })
  }

  totalWindow();
  resizeColumns();

  $(window).resize(function() {
      totalWindow();
      resizeColumns();
  });
});

HTML:

<div id="columns">
    <div class="col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere viverra porttitor. Curabitur eu libero id dui adipiscing accumsan vitae nec mauris. Nunc mi odio, fermentum pharetra pulvinar eget, laoreet id odio. Fusce sed est eget neque porta consequat tristique ut metus. Nunc lectus lorem, ultricies non hendrerit rhoncus, venenatis volutpat velit. Nulla mollis laoreet dignissim. Morbi venenatis lacinia lacinia. Vivamus molestie, neque a viverra vehicula, libero sem volutpat risus, at dignissim risus neque non turpis. Vivamus mollis placerat massa id fringilla. Praesent erat dui, sodales quis placerat commodo, pharetra eget diam. Proin at lorem at felis imperdiet ornare. Integer ullamcorper feugiat dui eu pharetra. Aliquam quis purus sed turpis lobortis scelerisque ac ut magna. Integer vel varius magna.</p></div>
    <div class="col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere viverra porttitor. Curabitur eu libero id dui adipiscing accumsan vitae nec mauris. Nunc mi odio, fermentum pharetra pulvinar eget, laoreet id odio. Fusce sed est eget neque porta consequat tristique ut metus. Nunc lectus lorem, ultricies non hendrerit rhoncus, venenatis volutpat velit. Nulla mollis laoreet dignissim. Morbi venenatis lacinia lacinia. Vivamus molestie, neque a viverra vehicula, libero sem volutpat risus, at dignissim risus neque non turpis. Vivamus mollis placerat massa id fringilla. Praesent erat dui, sodales quis placerat commodo, pharetra eget diam. Proin at lorem at felis imperdiet ornare. Integer ullamcorper feugiat dui eu pharetra. Aliquam quis purus sed turpis lobortis scelerisque ac ut magna. Integer vel varius magna.</p></div>
    <div class="col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere viverra porttitor. Curabitur eu libero id dui adipiscing accumsan vitae nec mauris. Nunc mi odio, fermentum pharetra pulvinar eget, laoreet id odio. Fusce sed est eget neque porta consequat tristique ut metus. Nunc lectus lorem, ultricies non hendrerit rhoncus, venenatis volutpat velit. Nulla mollis laoreet dignissim. Morbi venenatis lacinia lacinia. Vivamus molestie, neque a viverra vehicula, libero sem volutpat risus, at dignissim risus neque non turpis. Vivamus mollis placerat massa id fringilla. Praesent erat dui, sodales quis placerat commodo, pharetra eget diam. Proin at lorem at felis imperdiet ornare. Integer ullamcorper feugiat dui eu pharetra. Aliquam quis purus sed turpis lobortis scelerisque ac ut magna. Integer vel varius magna.</p></div>
    <div class="col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere viverra porttitor. Curabitur eu libero id dui adipiscing accumsan vitae nec mauris. Nunc mi odio, fermentum pharetra pulvinar eget, laoreet id odio. Fusce sed est eget neque porta consequat tristique ut metus. Nunc lectus lorem, ultricies non hendrerit rhoncus, venenatis volutpat velit. Nulla mollis laoreet dignissim. Morbi venenatis lacinia lacinia. Vivamus molestie, neque a viverra vehicula, libero sem volutpat risus, at dignissim risus neque non turpis. Vivamus mollis placerat massa id fringilla. Praesent erat dui, sodales quis placerat commodo, pharetra eget diam. Proin at lorem at felis imperdiet ornare. Integer ullamcorper feugiat dui eu pharetra. Aliquam quis purus sed turpis lobortis scelerisque ac ut magna. Integer vel varius magna.</p></div>
    <div class="col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere viverra porttitor. Curabitur eu libero id dui adipiscing accumsan vitae nec mauris. Nunc mi odio, fermentum pharetra pulvinar eget, laoreet id odio. Fusce sed est eget neque porta consequat tristique ut metus. Nunc lectus lorem, ultricies non hendrerit rhoncus, venenatis volutpat velit. Nulla mollis laoreet dignissim. Morbi venenatis lacinia lacinia. Vivamus molestie, neque a viverra vehicula, libero sem volutpat risus, at dignissim risus neque non turpis. Vivamus mollis placerat massa id fringilla. Praesent erat dui, sodales quis placerat commodo, pharetra eget diam. Proin at lorem at felis imperdiet ornare. Integer ullamcorper feugiat dui eu pharetra. Aliquam quis purus sed turpis lobortis scelerisque ac ut magna. Integer vel varius magna.</p></div>
</div>

CSS

#columns {
position:absolute;
}

#columns .col {
position: relative;
float:left;
zoom:1;
}

Answer 2

Похоже, ошибка Chrome для меня.В качестве альтернативы, вы можете попробовать использовать CSS3 Media Queries (поддерживаемые новейшими версиями всех основных браузеров; не знаю, вызывает ли это проблемы), они задокументированы здесь: http://www.w3.org/TR/css3-mediaqueries/, а пример здесь: http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html