подводные камни анимации png в IE

[Ashot]

Можно проще
в ие пнг отображаются посредством css-свойста filter, если точнее, то так: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=<img.src>,sizingMethod=scale);
Прозрачность устанавлиется так же свойством filter, то есть filter: Alpha(opacity=n)
При выполнении скрипта, меняющего прозрачность, получается вот что: свойство filter меняет значение с AlphaImageLoader на Alpha(opacity=n), т.е. картинка у нас теперь отбражается Alpha(opacity=n)(т.е. с серым фоном иешным), но спрозрачностью.
решение: картинку поместить в обёртку(например div) и менять значение прозрачности ей

[dimonline]

пробовал, вроде бы не помогло…

[dfuse]

Фильтры вообще-то складываются… На один объект их можно повесить несколько.

[ahat]

а нельзя такой скрипт сделать что бы у пользователей IE6 при заходе на страничку, автоматом устанавливался хотябы IE7.

[hiro]

а я думал это шутка

[stoune]

Вообще то пользователи на модэме используют Opera и отключают картинки.

[Vii]

Думаю, если такой скрипт напишут (на JS?) — это будет окончательный крах для системы безопасности IE и WinXP в целом. :))

[Tvarb]

1000 раз описывается, ребята пользуйтесь поиском
1. Прозрачный png
2. Круглые рамки

Это все уже было и не раз

[dimonline]

круто! а при чем тут анимация?
может сначала стоит вникнуть в суть описанной проблемы а потом посылать в жопу поиск?

[Tvarb]

а причем тут прозрачный Png в заголовке. При чем тут анимация?

[dimonline]

для тех, кто судит статью исключительно по заголовку, поменял его на более точный

[Tvarb]

Извините тогда статья не о чем, так как не все пользуются IE.
Решение по анимации вообще не увидел…
Без обид

[Danilka]

Простите, но Вы совсем не в тему.
При чём тут не все? ВСЕ нормальные вёбмастера стараются заставить свой сайт отображаться в IE. Так как пользователи им пользуются.
Человеку понадобилось что-то сделать, он сделал не плохой ресёрч и добил проблему. Поделился с нами, а вы критикуете не по делу.
Автору огромное человеческое спасибо за статью, плюсанул везде.

p.s. Я вот на одном из проектов тоже имел мнго сложностей с пнгшками в IE, когда понадобилось их не просто показать.
Как запустим проект, обязательно поделюсь опытом, бо ничего подходящего не нашёл даже в.комнете. Приглашаю Вас там тоже понегативить ;)

[sha1dy]

не обращайте внимание, тут пример класический идипо «чукча не читатель, чукча писатель»

[mefcorvi]

честно говоря, увидев заголовок «анимация png» я было решил, что вы научились выводить анимированные png в ie :-) Но с другой стороны более точный заголовок придумать не могу.

[Tvarb]

Ну давайте «по-троллим» меня.

Мы сами создаем Хабр.

Если у нас блог будет крутиться на статьях как эта или как положить div поверх flash — то «единица полезности информации» будет стремиться к нулю.

А если человек сам не понимает для чего и зачем он пишет о проблеме анимации в IE из-за png — то полезности от этой статьи ноль. Так как способы борьбы с прозрачным IE описывались многократно — а пример анимации работает только в IE.

В чем полезность данной статьи?
Что вы защищаете?

[Richard_Ferlow]

Ну так покажите пример ударными постами несущими много полезной информации, кто мешает то.

[Tvarb]

Когда действительно полезно пишу, было 1 раз пока :)

Тут больше поражает не знание материала

Известный факт, цитирую:

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

А делать еще и анимацию через него — это преступление.

Чему учат такие авторы.

Статья чистой воды графоманство… написана, а бы написать.

[dfuse]

Вы по-моему даже не читали статью… Человек пишет про то, что ему надо было создать плавную fade анимацию png картинки. Человек нашел нормальный выход — 5 картинок друг над другом, пусть это и костыль, но это лучше, чем всевозможные глюки при иных способах.

Статья в чем-то полезна, и вместо тупых заявлений — Вы бы лучше пошли и что-то свое написали, ага ;)

[chestah]

бедный эксплорер :)

[dimonline]

ага, издеваюсь над пенсионером, как хочу))

[Ashot]

это он над нами издевается :(

[r0zh0k]

Пора бы уже блог создать — IE и PNG. Просто целое ответвление веб-программирования — борьба с багами IE.

[l2k]

Добавте в статью:

Если использовать alpha-фильтр на тексте (который по умолчанию в IE7) со сглаживанием (antialiasing) — то получаем на выходе те-же косяки, что и в примере «Filters и неоправдавшиеся надежды». То есть, вместо красивого прозрачного шрифта — получаем полужирный ступенчатый шрифт без сглаженностей (antialiasing).

[dimonline]

Спасибо за комментарий!
Добавил в статью.

[NeX]

добавьте для шрифта background

[l2k]

Иногда, как вы можете догадаться, это не входит в планы дизайна :)

[WebSinner]

А вы знате? что в ие нельзя совмещать opacity и alpha каналы? в частноти при использовании анимации (Плавное появление обьекта) и этот баг существует с 5.5 ие по 8 включительно, кто то знает решение данной проблемы?

[Ashot]

почему же нельзя? можно, только для ie6 прозрачность придётся задавать не объекту с AphaImageLoader, а его обёртке, в 7 и 8 можно и напрямую прозрачность задать png-изображения. собственно в первом комменте подробно описал ситуацию

[fedorov]

Собственно автоматический фикс для ie6 на jquery: docs.jquery.com/Tutorials:PNG_Opacity_Fix_for_IE6
Жалко только этот способ не прокатит в тех случаях где png используется в качестве фона.

[fedorov]

:PNG_Opacity_Fix_for_IE6 — это часть ссылки.

[Snart]

Было бы значительно полезнее, если бы ваш пример с фейдингом png изображений был кроссбраузерным.
Вот тогда однозначно Must Have.

Мне бы хоть какой-то более-менее адекватный способ реализовать кроссбраузерный rollover png изображений c 8-битным альфаканалом, а то во всем великом и могучем Интернете видел только какие-то слишком корявые способы без вменяемых рабочих примеров, которые не рискнул брать для использования в промышленных масштабах, кнопочки в ИЕ6 так и остаются либо без подсветки, либо в Gif'ах.

[dimonline]

Тут в комментах мне кто-то посоветовал использовать fade transition в IE. Попробую, если она с png будет нормально работать, то сделаю кроссбраузерный скрипт, который в IE будет делать это через Transition, а в остальных браузерах через изменение прозрачности

[pipboy]

Может стоит подойти к решению этого вопроса с другой стороны? Например, для анимации лучше подходят transitions, в этом случае может помочь Fade.

[dimonline]

Попробовал сделать через transition, но, к сожалению, оригинальная полупрозрачность png сразу пропала =(

[pipboy]

Странно, у меня в 7-м все работает. Чтобы не было проблем с полупрозрачностью, картинке нужно в принудительном порядке прописать background-color как у фона

[stek]

Для тех, кто не понимает или не хочет понять суть проблемы (привет Tvarb):
www.projectcrankwalk.com/jquerybox/test.htm# — попробуйте нажать Open Box в IE7.
Кстати, примерно такая же ситуация и с Chrome, разница только в цвете рамки, в Chrome она белого цвета.

[pepelsbey]

Посмотрел, как на всё это реагирует IE8.
Косяков с фильтрами не обнаружил, однако то,
что он не понимает style=«opacity:0.7» огорчает

blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx#8936064

[Tvarb]

Ответ :) http://habrahabr.ru/blogs/webdev/50608/