Необычный баг WebKit с CSS селектором / Комментарии / Хабр

ferrari 27 фев 2012 в 15:22

Вы не знаете как найти саппорт Google Chrome? — www.google.com/support/forum/p/Chrome?hl=en
Или баг достоен того, чтобы жители хабра жёлтой водой ошпарили себе ноги?

Connor 27 фев 2012 в 15:28

Топик написан для веб-мастеров, кто может столкнуться с подобной проблемой.

MrHant 27 фев 2012 в 15:31

Для багов есть специальное место — трекер.
Все топики хабра по css перечитывать люди не будут.

smashercosmo 27 фев 2012 в 15:34

Человек не только описал баг, но и предложил решение. Что на мой взгляд вполне оправдывает статью.

MrHant 27 фев 2012 в 15:36

А разработчики хрома и сообщество всё ещё не вкурсе что баг есть и шансы на его исправление в будущих версиях намного меньше.

Смысл не в том правильная статья или нет. А в том чтобы внести баг и пускай написать статью, но со ссылкой на внесённый баг в трекер.

Предложить решение можно в том же внесённом баге.

smashercosmo 27 фев 2012 в 15:41

Ну это да, запостить на трекер конечно нужно.

namespace 27 фев 2012 в 18:23

Это он так троллит.

sompylasar 27 фев 2012 в 18:32

Забавно: баг магически пропадает после попытки проинспектировать ссылку в Developer Tools, причем пропадает на каждой ссылке по отдельности.

Connor 27 фев 2012 в 19:17

Да, я на это тоже внимание обратил, когда пытался понять в чем дело.

MrHant 27 фев 2012 в 20:18

Если оставить только одну ссылку на странице — баг тоже исчезнет.
Значит баг воспроизводится только когда несколько ссылок на странице (тулсы собсна переключают в «только одна ссылка» режим) и стиль первой ссылки применяется к остальным.

Полезно быть тестером :)

НЛО прилетело и опубликовало эту надпись здесь

TiPoK2 27 фев 2012 в 21:24

В Safari 5.2 тоже что и в Chrome. Видемо в новом вэбките баг.

lahmatiy 28 фев 2012 в 05:36

Это поведение объясняется особенностью webkit, в части совместного использования стилевой информации (sharing style data). То есть webkit старается применять один и тот же стиль там, где это возможно. Это дает уменьшение расхода памяти и положительно влияет на производительность. Об этом есть в хорошей статье HOW BROWSERS WORK: BEHIND THE SCENES OF MODERN WEB BROWSERS
Выдержка:

Sharing style data

Webkit nodes references style objects (RenderStyle) These objects can be shared by nodes in some conditions. The nodes are siblings or cousins and:

The elements must be in the same mouse state (e.g., one can't be in :hover while the other isn't)

Neither element should have an id

The tag names should match

The class attributes should match

The set of mapped attributes must be identical

The link states must match

The focus states must match

Neither element should be affected by attribute selectors, where affected is defined as having any selector match that uses an attribute selector in any position within the selector at all

There must be no inline style attribute on the elements

There must be no sibling selectors in use at all. WebCore simply throws a global switch when any sibling selector is encountered and disables style sharing for the entire document when they are present. This includes the + selector and selectors like :first-child and :last-child.

То есть если элементы в одном состоянии мышки (то есть :hover, :active), у них нет id, нет инлайновых стилей (задаваемые через атрибут style), совпадает набор атрибутов, совпадает набор классов и так далее по списку, то такие элементы могут совместно использовать один объект описания стиля (RenderStyle).
Вы задаете стиль для псевдо-элементов, для которых в плане атрибутов все идентично (их попросту нет). Видимо в этом случае (когда стиль задается для псевдо-элементов) игнорируется тот факт, что используется атрибутный селектор, использование которого по идее должно мешать совместному использованию стиля. Вернее в этом случае, атрибутный селектор применяется к элементу (ссылке), а не к самому псевдо-элементу. Это, скорее всего, баг.
Так стоит обратить внимание на последний пункт из списка, который говорит, что если используется хотя бы один контекстный селектор в документе, то webkit сбрасывает глобальный флаг, который позволяет элементам совместно использовать стилевые объекты. Для того чтобы это произошло достаточно чтобы в документе появился любой селектор с комбинаторами + или ~, либо же позиционные селекторы :first-child, :last-child, :nth-child и т.д. То есть как только появляется селектор, для которого важен не только сам элемент, но и его контекст (расположение относительно других элементов), то webkit перестает «экономить» стилевые объекты, так как это может привести к ошибкам. При этом не обязательно, чтобы этот селектор применялся. Поэтому ваш «хак» foo + bar {} помог решить проблему.
Сегодня практически любой сайт содержит как минимум один селектор, который препятствует sharing'у (тем более если используется генерируемое содержимое). Поэтому либо до вас эту проблему никто не ловил, либо баг имеет низкий приоритет.

Olegbl4 28 фев 2012 в 05:42

В Сафари этой проблемы нет. Всё-таки не вебкит, а хром.

lahmatiy 28 фев 2012 в 06:56

Мопед, как говорится, не мой.
Sharing стилевых объектов очень давно в webkit, но в прошлом году эту тему начали ворошить, чтобы он был более «агрессивным», срабатывал для элементов с инлайновым стилем и т.п. Вполне могли что-то сломать.
Возможно нововведения еще не докатились до Safari (хотя пишут что в safari 5.2 этот баг тоже проявляется), а Chrome обновляется интенсивнее, и там это уже проявилось.