Комментарии 56
В 7 хроме вообще все печально
Градиенты это клево.
Отличное исследование!
Сафари на радуге, конечно, феерично тормозит — только при прокрутке вниз, если скроллить вверх, то всё ок. Ну и при переключении на эту вкладку тоже тормозит. И ещё смешнее — если открыть вкладку, но не скроллить, то тормозит при переходе на другую вкладку — т.е. получается, что он дорендеривает зачем-то её содержимое.
Сафари на радуге, конечно, феерично тормозит — только при прокрутке вниз, если скроллить вверх, то всё ок. Ну и при переключении на эту вкладку тоже тормозит. И ещё смешнее — если открыть вкладку, но не скроллить, то тормозит при переходе на другую вкладку — т.е. получается, что он дорендеривает зачем-то её содержимое.
Сафари тормозит когда нужно отрисовать радугу, без разницы вверх или вниз. Сделайте окно маленьким, чтобы радуга выглядывала сверху, будет тормозить при прокрутке вверх.
Да, тормоза проявляются именно когда градиент попадает из невидимой части страницы в видимую (прокруткой). Так же в Опере и Fx, но не в такой степени. Получается, что box-shadow в этих браузерах отрисовывается именно после попадания в площадь обзора и «забываются» как только мимо него пролетаешь. А у Хрома, похоже, один раз и насовсем.
Вот они CSS 3 Tricks!
Меня пламя поразило. Спасибо.
От Хрома конечно не ожидал, что так подкачает))
Меня пламя поразило. Спасибо.
От Хрома конечно не ожидал, что так подкачает))
Как бы там ни было, но он однозначно лучше чем ИЕ.
А по поводу «подкачает», то не переживайте, багов рендеринга там много, браузер молодой, горячий.
А по поводу «подкачает», то не переживайте, багов рендеринга там много, браузер молодой, горячий.
На самом деле эти баги рендеринга зарепорчены довольно давно и смержелись в вот этот багрепорт:
code.google.com/p/chromium/issues/detail?id=29427
Можно звездочками поддержать важность бага )
code.google.com/p/chromium/issues/detail?id=29427
Можно звездочками поддержать важность бага )
Да разве? В конце статьи появился скриншот IE9TPP4, на мой взгляд, он лучше отрисовал, чем Хром.
А где же гвоздь программы — IE9 preview? :)
ie9 — dl.dropbox.com/u/3971799/httpd/screens/screen2.jpg
не знаю насколько dropbox подвержен хабраэффекту
кстати ie8 печален :)
dl.dropbox.com/u/3971799/httpd/screens/screen3.jpg
не знаю насколько dropbox подвержен хабраэффекту
кстати ie8 печален :)
dl.dropbox.com/u/3971799/httpd/screens/screen3.jpg
Странно, та же версия IE9, но последний тест:
habrastorage.org/storage/53b5675e/1fbebdad/ea3f8087/aecdbfd4.png
habrastorage.org/storage/53b5675e/1fbebdad/ea3f8087/aecdbfd4.png
Да, есть такой глюк, только что дома проверил.
ВОт что нашел по этому поводу в комментариях журнала разработчиков IE:
ВОт что нашел по этому поводу в комментариях журнала разработчиков IE:
the box-shadow feature is actually complete, but its blur radius property is extremely buggy (I submitted a bug on it, still waiting for an answer): if you specify '0' for blur radius, the shadow works properly. If you specify anything other than '0', you get the following cases:Последний пункт, как раз этот случай…
— blur is non-linear
— shadow's opacity is set around 0.5 and impossible to override
— shadow cuts off before the page's bottom
Хром7==Хром5 — без изменений вообще
НЛО прилетело и опубликовало эту надпись здесь
беговую дородку можно было бы сделать только наружной тенью и тогда небыло бы такого ахтунга
Вот подобные штуки нужно добавить в новый ACID(4/5)? для проверки поддержки CSS3, а то ACID3 устарел… :)
(ACID4 вроде собирались делать но не уверен что есть уже готовые результаты)
(ACID4 вроде собирались делать но не уверен что есть уже готовые результаты)
а проблемы с вылезанием тени можно решить обёрткой с overflow: hidden
Chrome 5, XP SP3. Не помогает.
7.0.503.0 dev — помогает
хром вроде единственный браузер, который умеет обрезать внутренние элементы по бордер-радиусу
#glow ins {
overflow: hidden;
display: block;
margin: 45px;
/* */ -moz-border-radius: 40px;
border-radius: 40px;
/* */ -moz-box-shadow:
#ff0000 0 0 24px 12px;
/* */ -webkit-box-shadow:
#ff0000 0 0 24px 12px;
box-shadow:
#ff0000 0 0 24px 12px;
height: 75px;
width: 75px; }
#glow div {
background: #ff8080;
/* */ -moz-border-radius: 40px;
border-radius: 40px;
/* */ -moz-box-shadow:
inset #ff0000 0 0 40px 10px;
/* */ -webkit-box-shadow:
inset #ff0000 0 0 40px 10px;
box-shadow:
inset #ff0000 0 0 40px 10px;
height: 75px;
width: 75px; }
хром вроде единственный браузер, который умеет обрезать внутренние элементы по бордер-радиусу
#glow ins {
overflow: hidden;
display: block;
margin: 45px;
/* */ -moz-border-radius: 40px;
border-radius: 40px;
/* */ -moz-box-shadow:
#ff0000 0 0 24px 12px;
/* */ -webkit-box-shadow:
#ff0000 0 0 24px 12px;
box-shadow:
#ff0000 0 0 24px 12px;
height: 75px;
width: 75px; }
#glow div {
background: #ff8080;
/* */ -moz-border-radius: 40px;
border-radius: 40px;
/* */ -moz-box-shadow:
inset #ff0000 0 0 40px 10px;
/* */ -webkit-box-shadow:
inset #ff0000 0 0 40px 10px;
box-shadow:
inset #ff0000 0 0 40px 10px;
height: 75px;
width: 75px; }
У Opera и Firefox (а также у Safari, но не так выраженно) почему-то вышла тонкая светлая обводка вокруг элемента.
Я так думаю, программисты броузеров сейчас дружно икают и нервно ворочаются в постелях. Мало того, что им пришлось написать с добрую треть „Фотошопа“ для работы со всеми этими графическими объектами, так ещё и алгоритмы антиальясинга двух разных элементов должны совпадать до субпикселя!
Кстати, в спецификации ничего не говорится про само размытие, должно ли оно быть линейным или логарифмическим, должна ли учитываться гамма и цветовые профили затронутых объектов и монитора, с какой точностью производить вычисления координат и цветов и нужна ли диффузия последних… Вполне может оказаться, что всё авторы в своём праве.
<user mode>Ну а наше право, как пользователей, требовать чтоб было красиво :)</user mode>
Я бы все-тааки больше трети оценил — добавил css-transform'ов, что требует проработку поворотов, искажений (skew). При чем, если у нас над-под этими объектами еще webgl…
Я бы все-тааки больше трети оценил — добавил css-transform'ов, что требует проработку поворотов, искажений (skew). При чем, если у нас над-под этими объектами еще webgl…
Сделайте ещё тест по свойству text-shadow, будет интересно. Хром (а может и всё семейство вебкита) в сравнении с оперой как топором тени рубит, особенно на средне-мелком тексте, уж лучше совсем без теней (ИЕ8), чем с таким убожеством, которое выдаёт Хром.
text-shadow не такой гибкий: нельзя менять размер тени. А вообще тема уже достаточно хорошо изжевана, например здесь
Баловался тенями. Всё круто. Убрал, и сайт сразу полегчал визуально.
Но показалось оправданным:
— наличие тени у всплывающих меню
— скругление углов
— повышение контраста белого текста на бледном фоне (тонка темная рамка вокруг текста — text-shadow:0 0 1px #505050;, например), но это не совсем по теме
Но показалось оправданным:
— наличие тени у всплывающих меню
— скругление углов
— повышение контраста белого текста на бледном фоне (тонка темная рамка вокруг текста — text-shadow:0 0 1px #505050;, например), но это не совсем по теме
Интересно, что под Виндой радуга в хроме действительно отображается моментально, а вот под Маком тормозит почище чем в сафари.
Такие извращенцы Хабру нужны!
торт!
У Оперы ещё есть баг неполноценного обрезания внешнего box-shadow атрибутом overflow:hidden;, из-за чего появляется полоса прокрутки из-за такого элемента, расположенного близко у края окна. Тень становится невидимой, но влияет на вычисление размера документа.
Отличная статья. Про градиенты очень понравилось.
Отличная статья! Спасибо за сравнения.
Картинки за давностью пропали,… жаль.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Дрессируем box-shadow