Pull to refresh

Comments 56

А у вас какой канал? В Канарейке точно так же, как и в 5-м Chrome Stable.
dev 7.0.503
скорее всего какое-то расширение виновато
Расширение может менять рендеринг?
Нет, не влияет никак. Chrome подкачал, надо идти писать слёзные мольбы разработчикам. Это безобразие!
Спасибо вам за такое сравнение!
Отличное исследование!

Сафари на радуге, конечно, феерично тормозит — только при прокрутке вниз, если скроллить вверх, то всё ок. Ну и при переключении на эту вкладку тоже тормозит. И ещё смешнее — если открыть вкладку, но не скроллить, то тормозит при переходе на другую вкладку — т.е. получается, что он дорендеривает зачем-то её содержимое.
Сафари тормозит когда нужно отрисовать радугу, без разницы вверх или вниз. Сделайте окно маленьким, чтобы радуга выглядывала сверху, будет тормозить при прокрутке вверх.
Да, тормоза проявляются именно когда градиент попадает из невидимой части страницы в видимую (прокруткой). Так же в Опере и Fx, но не в такой степени. Получается, что box-shadow в этих браузерах отрисовывается именно после попадания в площадь обзора и «забываются» как только мимо него пролетаешь. А у Хрома, похоже, один раз и насовсем.
Вот они CSS 3 Tricks!
Меня пламя поразило. Спасибо.
От Хрома конечно не ожидал, что так подкачает))
Как бы там ни было, но он однозначно лучше чем ИЕ.
А по поводу «подкачает», то не переживайте, багов рендеринга там много, браузер молодой, горячий.
На самом деле эти баги рендеринга зарепорчены довольно давно и смержелись в вот этот багрепорт:
code.google.com/p/chromium/issues/detail?id=29427

Можно звездочками поддержать важность бага )
Да разве? В конце статьи появился скриншот IE9TPP4, на мой взгляд, он лучше отрисовал, чем Хром.
А где же гвоздь программы — IE9 preview? :)
Я бы рад, но XP-шка не пускает) Буду благодарен, если кто-то сделает скриншот сводной страницы под IE9 PP4.
box-shadow на данный момент очень глючный в IE9, надеюсь в бета-версии это исправят.
Да, есть такой глюк, только что дома проверил.
ВОт что нашел по этому поводу в комментариях журнала разработчиков 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 — без изменений вообще
хром7 тот же результат показывает, так что первая фраза тоже верна
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
А какой смысл был их вообще проводить у них же нет поддержки CSS3.
Ради смеха только.
беговую дородку можно было бы сделать только наружной тенью и тогда небыло бы такого ахтунга
Вот подобные штуки нужно добавить в новый ACID(4/5)? для проверки поддержки CSS3, а то ACID3 устарел… :)

(ACID4 вроде собирались делать но не уверен что есть уже готовые результаты)
а проблемы с вылезанием тени можно решить обёрткой с overflow: hidden
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; }

опера отлично вырезает бордер радиус с хидден, и фф
<div style=«border-radius:10px;border:1px solid red;width:50px;height:50px;overflow:hidden»>
<div style=«background:blue;width:50px;height:50px».</div>
</div>
Я про обертку, все ок :)
ок — я согласен с твоим самым верхним комментом :)
У Opera и Firefox (а также у Safari, но не так выраженно) почему-то вышла тонкая светлая обводка вокруг элемента.

Я так думаю, программисты броузеров сейчас дружно икают и нервно ворочаются в постелях. Мало того, что им пришлось написать с добрую треть „Фотошопа“ для работы со всеми этими графическими объектами, так ещё и алгоритмы антиальясинга двух разных элементов должны совпадать до субпикселя!

Кстати, в спецификации ничего не говорится про само размытие, должно ли оно быть линейным или логарифмическим, должна ли учитываться гамма и цветовые профили затронутых объектов и монитора, с какой точностью производить вычисления координат и цветов и нужна ли диффузия последних… Вполне может оказаться, что всё авторы в своём праве.
<user mode>Ну а наше право, как пользователей, требовать чтоб было красиво :)</user mode>

Я бы все-тааки больше трети оценил — добавил css-transform'ов, что требует проработку поворотов, искажений (skew). При чем, если у нас над-под этими объектами еще webgl…

Сделайте ещё тест по свойству text-shadow, будет интересно. Хром (а может и всё семейство вебкита) в сравнении с оперой как топором тени рубит, особенно на средне-мелком тексте, уж лучше совсем без теней (ИЕ8), чем с таким убожеством, которое выдаёт Хром.
text-shadow не такой гибкий: нельзя менять размер тени. А вообще тема уже достаточно хорошо изжевана, например здесь
не знаю что там разжёвано, я имел вввиду имено визуальное сравнение отображения одних и тех же эффектов в разных браузерах, ровно то, что сделано в этой статье.
Баловался тенями. Всё круто. Убрал, и сайт сразу полегчал визуально.

Но показалось оправданным:
— наличие тени у всплывающих меню
— скругление углов
— повышение контраста белого текста на бледном фоне (тонка темная рамка вокруг текста — text-shadow:0 0 1px #505050;, например), но это не совсем по теме
Интересно, что под Виндой радуга в хроме действительно отображается моментально, а вот под Маком тормозит почище чем в сафари.
Такие извращенцы Хабру нужны!
У Оперы ещё есть баг неполноценного обрезания внешнего box-shadow атрибутом overflow:hidden;, из-за чего появляется полоса прокрутки из-за такого элемента, расположенного близко у края окна. Тень становится невидимой, но влияет на вычисление размера документа.
Значит, не только внешнего, но и внутреннего box-shadow. Ведь горизонтальный скролл появляется в Опере в сводной странице именно из-за большой и сильно сдвинутой вправо внутренней «тени» у градиента.
Отличная статья. Про градиенты очень понравилось.
Отличная статья! Спасибо за сравнения.
Куда сейчас лучше всего заливать для Хабра? Пофикшу.
Восстановил все залитые мной картинки. Думаю, понятно, что результаты тестов безнадежно устарели ;)
Заодно причесал весь код (надеюсь, нигде не попортил случайно — проверять не стал).
Пока не знаю куда лучше залить HTML-страницу со всеми примерами в куче.
Only those users with full accounts are able to leave comments. Log in, please.