Немного шкалы пользовательского интерфейса JQuery + CSS

Question

Я пытаюсь создать небольшой слайдер, где jquery UI Scale выводит и изображение Div и масштабирует первый. Моя проблема заключается в том, что когда он масштабируется в Google Chrome, он немного встряхивается, пока он находится в процессе масштабирования. В IE или firefox он работает как шарм, не вибрирующий/дрожащий вообще!

Теперь я тестировал, что, когда я не использую background-position: center в css, он больше не трясет, но если я выберу это, тогда это не похоже на то, что он будет уменьшен из центра изображения больше. Что я могу сделать, чтобы избавиться от этого? Вот пример (открыть его с помощью Chrome) http://jsfiddle.net/gqLZe/

Answer 1

Собирает анимацию в замедленном темпе (очень продолжительный), я могу видеть, что в нижней части DIV фактически перемещается вверх пиксель иногда - что и является причиной встряхивая. Наблюдая за ним в инспекторе стиля, я вижу, что jQuery устанавливает каждое из свойств позиции div в десятичное число, и позиция div фактически изменяется каждый раз, когда одно из этих десятичных знаков проходит целое число. Поскольку верх и высота не обязательно проходят целое число в то же самое время, вы получаете дрожь. С другой стороны, слева и ширине, кажется, всегда передают целое число одновременно, хотя я не могу точно сказать, так ли это. В любом случае, я не смог отличить горизонтальное тряску.

По-видимому, Chrome усекает любые десятичные числа в свойствах позиции, тогда как другие браузеры используют арифметику с плавающей точкой для вычисления границы div в абсолютных координатах перед любым округлением или усечением. Я не уверен, относится ли это к ошибке или нет (нужно было бы изучить спецификацию), хотя, вероятно, что-то будет исправлено/улучшено в конечном итоге. Вероятно, это может быть ошибкой в ​​jQuery, поскольку jQuery должен работать с такими особенностями браузера.

Устранение этой проблемы требует наличия другого алгоритма масштабирования. Одним из решений является вычисление в JavaScript значений, которые другие браузеры автоматически вычисляют, и предоставляют только целые числа для Chrome, как в этом jsFiddle: http://jsfiddle.net/gqLZe/1/

Этот метод может вызвать аналогичную проблему в других браузерах, когда содержащийся элемент имеет неинтегрированный верхний или левый (в том числе из-за границы или поля), но пока вы придерживаетесь целых чисел, он должен работать нормально.

Альтернативным решением было бы обеспечить родительский элемент размера, который вы хотите, чтобы ДИВ расширить до и анимации на right и bottom, а не на width и height. Это может быть сделано очень просто с помощью JQuery-х animate():

var width = $(".frame").width(); 
var height = $(".frame").height(); 
$(".frame").css({ 
    top: height/2 + "px", 
    bottom: height/2 + "px", 
    left: width/2 + "px", 
    right: width/2 + "px" 
}).show().animate({ 
    top: 0, 
    bottom: 0, 
    left: 0, 
    right: 0 
}, 3000, 'linear'); 

jsFiddle: http://jsfiddle.net/gqLZe/3/

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