IE исчезает, вызывая белые пятна на изображениях - PullRequest
6 голосов
/ 04 сентября 2011

Я действительно застрял на этом. Сайт почти готов. Просто пытаюсь сгладить последние несколько ошибок с IE - какой сюрприз!

Вот предварительный просмотр сайта: http://www.preview.imageworkshop.com/portfolio/

ПРОБЛЕМА если вы просматриваете страницу портфолио в IE и используете фильтры, переключающиеся назад и вперед между вариантами, через некоторое время изображения начинают покрываться белыми точками (особенно в темных областях).

Примечание: Я реализовал ИЗОТОП для фильтрации / макета на веб-сайте Портфолио.

CSS3-переходы определены в CSS, однако я считаю, что ISOTOPE возвращается к использованию jquery для анимационных эффектов.

Это веб-сайт, посвященный фотографии, поэтому очень важно иметь красивые картинки.

Вещи, которые я уже знаю: - это известная проблема в IE6, 7 и 8, вызванная fadein / fadeout и пикселями, оставленными прозрачными.

  • люди утверждают, что вы можете исправить это, переместив черную точку изображения, поскольку предположительно проблема заключается только в «настоящих черных» пикселях. Мы попробовали это, и у нас это не работает - и мы также не хотим вносить эти изменения, потому что точность цвета важна для изображений, и смещение черной точки начинает портиться с изображением. В портфолио 3 больших изображения внизу смещены черные точки, и они по-прежнему получают белые точки.

  • очевидно, установка цвета фона родительского блока div на черный также решит проблему. мне показалось, что это работает, если я установил фон .photos на черный (но это также делает половину экрана черным. Но установка фона DIV, содержащего изображение (.photo) не помогла. Если есть чтобы мы могли заставить это работать, это было бы подходящим решением. Я не могу заставить его работать на меня (?).

Так куда же отсюда? Я могу отключить переходы / затухание и т.д. в ISOTOPE, установив animationEngine: «CSS». Это означает, что если браузер поддерживает CSS3, то CSS будет использоваться для переходов, но если нет, браузер не вернется к использованию JavaScript для выполнения переходов. Однако это означает, что на странице IE нет перехода, который выглядит как брюки.

В идеале мне нужно исправить проблему с белым пятном. - какие-либо предложения о том, как я могу получить ISOTOPE для обновления изображений после фильтра? - может быть, есть другой способ, которым я могу сделать переходы? - возможно ли удалить fadein / fadeout, но все еще использовать какое-то преобразование, чтобы у меня все еще была анимация в IE?

Любая помощь будет принята с благодарностью. Все выходные я рвал на себе волосы, пытаясь заставить это работать, но безуспешно.

ОБНОВЛЕНИЕ: 8/9/2011 Мне удалось найти способ отключить переход затухания, однако используемый мной фильтр javascript по-прежнему устанавливает непрозрачность равной 0, чтобы скрыть изображение, и это фактически приводит к возникновению проблемы белого пятна. Поэтому мне действительно нужно найти способ установить цвет фона на черный, чтобы он скрывал прозрачные пиксели.

Ответы [ 4 ]

1 голос
/ 15 февраля 2012

Однажды я решил эту проблему, сохранив изображения в режиме CMYK (возможно только для файлов JPG).

1 голос
/ 11 сентября 2011

У меня была та же проблема, что и у оригинального постера. Чтобы избавиться от белых пикселей / точек, я установил цвет фона div, содержащего мои изображения, на # 000, и это устранило проблему.

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

1 голос
/ 21 сентября 2011

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

Обратите внимание, что сайт предварительного просмотра из исходного сообщения больше не активен, но живой сайт теперь можно посмотреть здесь: http://www.imageworkshop.com/portfolio/

ОБЩИЙ ИСПРАВЛЕНИЕ

проблема вызвана сокрытием изображения в IE с использованием opacity: 0; (не обязательно характерно для затухания в IE, как предлагает большинство других потоков. Я удалил затухание непрозрачности, но все еще имел ту же проблему потому что непрозрачность: 0; использовалась, чтобы скрыть отфильтрованные изображения.

ответ - использовать display: none; , чтобы скрыть изображения для IE.

МОЕ ОСОБЕННОЕ ОСУЩЕСТВЛЕНИЕ ИСПРАВЛЕНИЯ

Использовал шаблон для идентификации старых / проблемных браузеров, используя этот код в файле header.php моей темы WordPress - это добавляет класс ".oldie", когда идентифицируется старый браузер:

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

CSS для использования display: none ;, вместо opactiy: 0 для ISOTOPE (обратите внимание, это относится к плагину ISOTOPE, который я использую для скрытия / фильтрации изображений.

 .oldie .isotope-hidden { display: none; }

В javascript ISOTOPE вверху укажите, существует ли oldie:

 isOldie = $('html').hasClass('oldie');

Затем скажите изотопу, какой sytle использовать:

hiddenStyle: isOldie ? {} : $.Isotope.settings.hiddenStyle,
visibleStyle: isOldie ? {} : $.Isotope.settings.visibleStyle

Вот пример сайта, который показывает это в действии: http://support.metafizzy.co/2011/09-12-ie-trans.html

и объявление javascript для ISOTOPE с этой страницы (обратите внимание, что это проще, чем то, что я использовал на моем сайте)

 <script>
 $(function(){
    var $container = $('#container'),
    $photos = $container.find('.photo'),
    isOldie = $('html').hasClass('oldie');

    $container.imagesLoaded( function(){
       $container.isotope({
       itemSelector : '.photo',
       masonry: {
       columnWidth: 200
       },
       hiddenStyle: isOldie ? {} : $.Isotope.settings.hiddenStyle,
       visibleStyle: isOldie ? {} : $.Isotope.settings.visibleStyle
    });
 });
    $('#filters a').click(function(){
      $container.isotope({ filter: $(this).attr('data-filter') });
      return false;
    });
 });
 </script>
0 голосов
/ 11 сентября 2011

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

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