How to become an author
Search
Profile
Pull to refresh

Comments 56

А у вас какой канал? В Канарейке точно так же, как и в 5-м Chrome Stable.
Total votes 1: ↑1 and ↓0 +1
dev 7.0.503
скорее всего какое-то расширение виновато
This comment wasn’t rated yet 0
Расширение может менять рендеринг?
This comment wasn’t rated yet 0
Нет, не влияет никак. Chrome подкачал, надо идти писать слёзные мольбы разработчикам. Это безобразие!
Спасибо вам за такое сравнение!
Total votes 5: ↑4 and ↓1 +3
Отличное исследование!

Сафари на радуге, конечно, феерично тормозит — только при прокрутке вниз, если скроллить вверх, то всё ок. Ну и при переключении на эту вкладку тоже тормозит. И ещё смешнее — если открыть вкладку, но не скроллить, то тормозит при переходе на другую вкладку — т.е. получается, что он дорендеривает зачем-то её содержимое.
Total votes 1: ↑1 and ↓0 +1
Сафари тормозит когда нужно отрисовать радугу, без разницы вверх или вниз. Сделайте окно маленьким, чтобы радуга выглядывала сверху, будет тормозить при прокрутке вверх.
This comment wasn’t rated yet 0
Да, тормоза проявляются именно когда градиент попадает из невидимой части страницы в видимую (прокруткой). Так же в Опере и Fx, но не в такой степени. Получается, что box-shadow в этих браузерах отрисовывается именно после попадания в площадь обзора и «забываются» как только мимо него пролетаешь. А у Хрома, похоже, один раз и насовсем.
This comment wasn’t rated yet 0
Вот они CSS 3 Tricks!
Меня пламя поразило. Спасибо.
От Хрома конечно не ожидал, что так подкачает))
Total votes 6: ↑5 and ↓1 +4
Как бы там ни было, но он однозначно лучше чем ИЕ.
А по поводу «подкачает», то не переживайте, багов рендеринга там много, браузер молодой, горячий.
Total votes 4: ↑2 and ↓2 0
На самом деле эти баги рендеринга зарепорчены довольно давно и смержелись в вот этот багрепорт:
code.google.com/p/chromium/issues/detail?id=29427

Можно звездочками поддержать важность бага )
Total votes 2: ↑2 and ↓0 +2
Да разве? В конце статьи появился скриншот IE9TPP4, на мой взгляд, он лучше отрисовал, чем Хром.
Total votes 3: ↑2 and ↓1 +1
А где же гвоздь программы — IE9 preview? :)
Total votes 2: ↑1 and ↓1 0
Я бы рад, но XP-шка не пускает) Буду благодарен, если кто-то сделает скриншот сводной страницы под IE9 PP4.
Total votes 1: ↑1 and ↓0 +1
box-shadow на данный момент очень глючный в IE9, надеюсь в бета-версии это исправят.
Total votes 2: ↑1 and ↓1 0
Да, есть такой глюк, только что дома проверил.
ВОт что нашел по этому поводу в комментариях журнала разработчиков 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
Последний пункт, как раз этот случай…
This comment wasn’t rated yet 0
Да. Такое бывает, Но исчезает сразу после скроллинга.
This comment wasn’t rated yet 0
Хром7==Хром5 — без изменений вообще
This comment wasn’t rated yet 0
хром7 тот же результат показывает, так что первая фраза тоже верна
Total votes 2: ↑1 and ↓1 0
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
А какой смысл был их вообще проводить у них же нет поддержки CSS3.
Ради смеха только.
Total votes 1: ↑1 and ↓0 +1
беговую дородку можно было бы сделать только наружной тенью и тогда небыло бы такого ахтунга
This comment wasn’t rated yet 0
Вот подобные штуки нужно добавить в новый ACID(4/5)? для проверки поддержки CSS3, а то ACID3 устарел… :)

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

Total votes 1: ↑0 and ↓1 -1
опера отлично вырезает бордер радиус с хидден, и фф
Total votes 2: ↑2 and ↓0 +2
<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>
This comment wasn’t rated yet 0
Я про обертку, все ок :)
Total votes 1: ↑1 and ↓0 +1
ок — я согласен с твоим самым верхним комментом :)
Total votes 1: ↑1 and ↓0 +1
У Opera и Firefox (а также у Safari, но не так выраженно) почему-то вышла тонкая светлая обводка вокруг элемента.

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

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

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

Total votes 1: ↑1 and ↓0 +1
Сделайте ещё тест по свойству text-shadow, будет интересно. Хром (а может и всё семейство вебкита) в сравнении с оперой как топором тени рубит, особенно на средне-мелком тексте, уж лучше совсем без теней (ИЕ8), чем с таким убожеством, которое выдаёт Хром.
Total votes 2: ↑1 and ↓1 0
text-shadow не такой гибкий: нельзя менять размер тени. А вообще тема уже достаточно хорошо изжевана, например здесь
Total votes 1: ↑1 and ↓0 +1
не знаю что там разжёвано, я имел вввиду имено визуальное сравнение отображения одних и тех же эффектов в разных браузерах, ровно то, что сделано в этой статье.
This comment wasn’t rated yet 0
Баловался тенями. Всё круто. Убрал, и сайт сразу полегчал визуально.

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

Your account

Sections

Information

Services

Support Return to old version
© 2006–2023, Habr