jQuery затухающие изображения с изменением размера HTML заставляют их иногда двигаться - PullRequest
4 голосов
/ 06 марта 2012

У меня странная проблема в FF10 с использованием jQuery 1.7.1. У меня есть галерея, которая может уменьшать изображения, некоторые из них могут быть немного уменьшены по сравнению с их исходными размерами.

Что происходит, так это то, что иногда изображение «масштабируется» или переходит в одну сторону, когда я пытаюсь анимировать его непрозрачность с помощью jQuery.

Для примера, посмотрите здесь на одну из маленьких и наведите на нее курсор мыши: http://jsfiddle.net/ZUWkh/

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

Есть идеи, что происходит и как это побороть?

Я масштабирую их вот так, чтобы разместить их в строках галереи - размеры рассчитаны с помощью PHP и пропорциональны. Вместо этого я мог бы использовать CSS, если есть разница.

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

Еще одно обновление: Я также замечаю, что это, похоже, влияет на сглаживание, поскольку изображения, которые выглядят размытыми, выглядят «неровными», но при полной непрозрачности выглядят гладкими. Что-то новое в FF, чтобы изображения выглядели красивее?

Еще одно обновление: Только что протестированный на Chrome, Safari на Mac и IE7 на XP, эта проблема возникает ТОЛЬКО на FF10 на Mac (не знаю о других платформах или версиях). Странно ...

Еще одно очередное обновление: Только что протестированный на XP с FF9, эта проблема не возникает. Затем я обновил его до FF10, и проблема появляется. Думаю, что это может быть достаточно сильным для сообщения об ошибке ...

1 Ответ

9 голосов
/ 06 марта 2012

Выяснил, как это исправить, не спрашивайте меня, почему это работает или как, но если вы стилизуете изображение с помощью

box-shadow: #000 0em 0em 0em;

эта проблема волшебным образом исчезает. Определенно делать с тем, что делает Firefox сглаживания, потому что с этим стилем применяется изображение сглаживается, когда изменяется прозрачность.

Кроме этого, я не знаю, почему это произошло или почему это решение работает.

Кроме того, без проблем протестировано в IE7 / 8, Safari, Chrome и т.д.

ОБНОВЛЕНИЕ - эта проблема все еще видна, даже с применением этого стиля, только в Firefox. Иногда может помочь другой стиль backface-visibility:hidden; - для получения дополнительной информации см. Этот блог: http://css -tricks.com / almanac / properties / b / backface-visibility /

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...