Есть ли максимальная длина строки для парсера CSS Chrome?

Я наблюдаю какое-то очень странное поведение, связанное с длинным правилом CSS.Есть ли максимальная длина строки для парсера CSS Chrome?

Мой HTML выглядит следующим образом:

<section id="mysection" class="modal">...</section>

Мой (дерзость скомпилированных) CSS содержит следующие правила:

.modal { 
    display: none; 
} 

somelement, someotherelement, ... #mysection subelement,... #mysection someothersubelement, ... { 
    display: block; 
}

Второе правило CSS является 84000+ символов длиной. Обратите внимание, что он не должен влиять на элемент #mysection, но только его дочерние элементы.

Желаемый результат - скрыть элемент #mysection. Это правильно сделано в Firefox 37.0.2. В Chrome 42.0.2311.135 элемент виден - это неверно. Инструменты разработчика указывают, что на элемент #mysection влияют оба правила, но второе правило имеет приоритет. Тем не менее, я не могу найти определенную часть строки CSS, которая влияет на свойство отображения раздела.

Раздел спрятан в Chrome, когда я меняю его идентификатор.

Я также могу получить правильное поведение в Chrome путем ручного разбиения строки CSS на два раздела ~ 40 тыс. Символов с идентичными директивами display: block. Гипотеза о том, что анализатор Chrome CSS обрежет длинную строку следующим образом:

... #mysection subelement, ... 
      ^
       | 
      truncate here

Как следствие, #mysection элемента будет влиять на display: block директивы.

Имею ли я смысл? Мне кажется, что я теряю рассудок здесь.

источник

2015-06-11 Régis B.

Подробнее, правило **, что ** длинный? Время переписать ваш SASS. Можете ли вы опубликовать свое правило SASS? – mattytommo

Вот он: https://github.com/edx/edx-platform/blob/e424ce8a1d8dca3c4449941ab9ce27d6fb7ef3c8/lms/static/sass/multicourse/_account.scss#L165 Мне кажется, что определение длинного идентификатора лучше, чем множественное повторяющиеся определения, не так ли? –

Wow ... Нет, вы должны определенно не создавать правила так долго. Позвольте мне угадать, вы все расширяете? Дублирующие правила не ухудшают производительность, как вы думаете. Предполагая, что вы расширяете все, вот хорошая статья на эту тему: http://www.sitepoint.com/avoid-sass-extend/ –

Если одно правило css содержит более 4096 селекторов, оно создает переполнение по специфичности селектора. This is a known bug, и в потоке на самом деле нет никаких планов исправить.

«... потому что наличие такой высокой точности на узле является очень далеким краем».

Это гипотеза, но я предполагаю, что основная причина проблемы связана с ограничением 32-битного целого где-то в парсере css, так как это число 4096 невероятно похоже на листы стилей в IE6 -9. Математика за этим вопросом объясняется here.

Хотя это может быть не очень полезно для вашей конкретной ситуации, перемещение селекторов в их собственную линию появляется resolves the issue.

источник

2015-11-20 18:05:43 Brice

Это было страшно в течение 5 месяцев. Этот отчет об ошибках - отличное открытие; отличная работа! –

Есть ли максимальная длина строки для парсера CSS Chrome?

ответ

Смежные вопросы