Предыстория :
Как то неожиданно появился заказ на создание интересного эффекта на сайте. Работа вроде и простая но и в одно время требовала немного подумать. Сам я занимаюсь уже 3 года версткой. И ничего подобного не делал. Оценил разработку и согласился. Но тут меня ждали подводные камни и ошибка которую я обнаружил в 1 варианте затрагивает браузеры Opera Next (12.00 alpha b.1351). Что же касается Google Chrome 19 (dev) и Mozilla FF 11 (release), IE9-10 — тут все в порядке. Во 2 варианте сдался Chrome.
Часть 1я. Прелюдия.
И так суть бага заключается в: ошибках разбора Opera Presto rendering engine 2.10 и каком то движке IE. Баг очень редкий так как комбинация подобных правил css2 и css3 очень редка.
Заглянем на официальную страницу Presto.
Мы видим полную поддержку css3 border-radius.
Напишем достаточно простой html код:
ссылка на код.
И так задача, нам нужен блок размером 150х150px с,
overflow:hidden;
а внутри блок с размером 400х400px казалось бы в чем загвоздка? Ведь многие кто делал сам «карусели», использовал данное свойство.
Результат во всех браузерах ожидаемый ( ссылка на пример ):
Вот тут подходим к сути ошибки, мне потребовались «окошки», я решил не резать кучу картинок, а просто воспользоваться css3 свойством добавив к классам .p1 и .p2 :
border-radius:100%;
которое работает во всех последних версия популярных браузеров.
Вот тут то и пошла жара.
Написав подобный код я увидел: в Chrome 19 и FF 12, и в IE вполне ожидаемый результат:
Открыв Opera Next 11 alpha, я обнаружил следующее ( ссылка на пример ):
Что это? как? почему? — эти вопросы у меня возникли.
Ведь это комбинация стандартных свойств, которые полностью поддерживаются всеми браузерами.
Часть 2я. WTF?!
Но мало того мне понадобилось еще одно свойство, которое, мне показалось, что вполне комбинируемое хотя бы в Chrome и FF.
Но тут меня опять ждала большая печаль.
Ссылка на код.
Добавив реальное позиционирование относительно текущего места сдался и Chrome 19 dev, Opera Next 11 также не подавала признаков жизни.
Результат Chrome,Opera (ссылка на пример):
А вот кто действительно удивил так это движок FF и IE он прошел испытание!
Хочу выразить спасибо skobkin за дискуссию на данную тему.
Выводы :
Для себя я обнаружил что надо всегда следить и изучать поведение css «правил».
Увы я не нашел способ. Но! есть небольшой можно сказать хак для реального позиционирования это использовать свойства margin.
Я постарался сделать статью с обзором ошибки и думал о нормальной дискуссии на тему: «почему?». А получил лишь нытиков и педантов. Спасибо хабр!
Решил добавить к статье (спасибо zapimir) :
Еще как важна, нужно понимать, что в IE несколько движков, и если нет doctype, то хоть в dev tools заглядывать нужно, прежде чем утверждать, что именно в IE 9, что-то не работает.
Вообще к сожалению различных косяков рендеринга хватает. И кстати как раз IE 9 радует вниманием к мелочам.
Вот к примеру такая банальная вещь, как border и border-radius. Вроде все давно это поддерживают, но если сделать к примеру тип границы dotted, то браузеры начинают чудить.
IE9 как по мне самый правильный рендеринг выдает (точки круглые и равномерно распределены по границе, не накладываясь друг на друга), Chrome считает, что точки при увеличении становятся четырехугольными. В Opera и FF точки накладываются в FF это особенно коряво выглядит.
Посмотреть можно на этой странице.
PS: Данная ошибка отправится в баг-трекер оперы и хрома.
PS2: Если вы нашли ошибку в статье просьба писать в личку.
PS3: Очень хочу чтобы мне написали в личку за что минусуем. Я люблю критику.
PS4: Я естественно тестировал с док тайпом. На реальном проекте. Он закрытый и я не могу показать ни его ТЗ ни его самого. Я все понимаю но обвинять в плевках сообществу меня не стоит.
PS5: Добавил док тайп и сделал валидный документ — ура!.
PS6: Шутка про png и jpeg не актуальна.
PS7: Чтоб не раздражать глаз код сделал изображениями и помести ссылки на соответствующий код.
PS8: Переместил примеры на jsfiddle.