Вдохновленный Flexbugs этот список предназначен для того, чтобы быть курируемым списком ошибок, багов, неполных реализаций и особенностей работы CSS Grid Layout в разных браузерах. Grid реализован в браузерах в работоспособном состоянии, однако есть некоторые проблемы - давайте документировать их все здесь.
Здесь мне хотелось бы сосредоточиться на вопросах, связанных со спецификацией Grid, но вполне вероятно, что придется отдельно ссылаться на некоторые другие спецификации, такие как Box Alignment. Если вы считаете, что заметили проблему, и, похоже, она относится к Гридам, опубликуйте её. Мы сможем подробно разобраться в деталях и убедиться, что проблемы с реализацией в браузере или ошибки спецификации попали в нужное место.
Также, пожалуйста, поднимите вопрос, если я ошибаюсь в отношении любого из описаных багов или у вас есть дополнительная информация или примеры для добавления. Вероятно, я мог сослаться на неправильный UA или пропустил изменение в спецификации. Помогите сделать список более точным и актуальным!
Присылая вопрос, пожалуйста, подробно опишите путь воспроизведения проблемы и создайте Сокращенный Тестовый Пример, чтобы проверить, что проблема не является следствием вашего кода. Если вы хотите больше узнать о CSS Grid Layout, посмотрите на Гриды в Примерах где вы найдете видеоуроки, примеры и ссылки на другие полезные ресурсы. На больше вопросов о CSS Гридах я отвечу в своем AMA когда будет время. Также я собрал нужную информацию о фоллбеках для старых браузеров.
grid-auto-rowsиgrid-auto-columnsдолжен принимать список направляющих.- Повторная нотация должна заново принимать список направляющих.
- Поддержка фрагментации.
- Выравнивание элементов с собственными размерами в сетках с фиксированными направляющими.
- Элементы с внутренним соотношением сторон должны выравниваться в начале.
grid-gapпараметры должны принимать значение в процентах.- Grid отступы должны вести себя как направляющие с авто-размерами?
- Установка максимальной высоты в процентах должна уменьшать изображение большего размера внутри направляющих сетки.
min-contentиmax-contentв направляющих.- Некоторые HTML элементы не могут быть грид-контейнерами.
- Текстовое поле, которое является элементом сетки, сворачивается до нулевой ширины.
- Пространство, распространяемое на пустые направляющие, растягивается элементами с контентом.
- Несостыковки с процентными паддингами и марджинами.
- fit-content растягивается.
| Примеры | Пострадавшие браузеры | Отслеживание ошибок | Тесты |
|---|---|---|---|
| 1.1 — bug | Firefox | Firefox #1339672 | WPT |
Параметрыgrid-auto-rows и grid-auto-columns дают возможность задавать размеры направляющих в неявных сетках. Спецификация говорит:
"Если заданы несколько размеров направляющих, шаблон повторяется по мере необходимости, чтобы найти размеры неявных направляющих. Первая неявная направляющая сетки перед явной сеткой принимает первый указанный размер и так далее вперед.; И последняя неявная направляющая сетки до того, как явная сетка получит последний указанный размер и так далее в обратном порядке." - 7.6 Implicit Track Sizing (Размеры Неявных Направляющих)
| Примеры | Пострадавшие браузеры | Отслеживание ошибок |
|---|---|---|
| 2.1 — bug | Firefox | Firefox #1341507 |
Повторная нотация может принимать однотипное значение направляющей для повторения, например:
repeat(3,200px);
Или для списка направляющих:
repeat(3, 200px 100px);
Это возможно когда числа повторяются как auto-fill или auto-fit для объявления как можно большего количества направляющих.
"Первый аргумент указывает количество повторений. Второй аргумент - это список направляющих, которые повторяются определенное количество раз." - Синтакс
repeat()
| Примеры | Пострадавшие браузеры | Отслеживание ошибок |
|---|---|---|
|
Firefox
Chrome Safari |
Firefox #1266265 Chrome #614667 |
В настоящее время существует ограниченная поддержка фрагментации в браузерах, поэтому такие функции, как свойства break-* вряд ли будут адекватно работать. Подробнее о том, как должна работать фрагментация в CSS Grid Layout: 12. Fragmenting Grid Layout.
| Примеры | Пострадавшие браузеры | Отслеживание ошибок |
|---|---|---|
| 4.1 — bug | Firefox | Firefox #1385410 |
В Firefox элементы с внутренним размером масштабируются, чтобы вписаться в сетку с фиксированным размером, а не вылезать за неё.
Я считаю, что правильное поведение в данном кейсе состоит в переполнении элементов с фиксированным размером, в соответствии с резолюцией WG Issue 523.
| Примеры | Пострадавшие браузеры | Отслеживание ошибок |
|---|---|---|
|
5.1 — bug 5.2 — workaround |
Safari 10 (fixed in Technical Preview) |
В Safari 10 элемент сетки поумолчанию выравнивался как stretch, а не start.
Временным решением проблемы является декларирование align-self: start и justify-self: start для элемента.
| Примеры | Пострадавшие браузеры | Отслеживание ошибок |
|---|---|---|
| 6.1 — bug | Safari 10 (fixed in Technical Preview 29) | WebKit #170764 |
В настоящее время процентные значения grid-gap помечаются как рискованные в Уровне 1 спецификации. Сильным вариантом использования для процентного значения является добавление некоторых функций грид-лейаута к макету, который уже использует разметку на флоатах или флексбоксах: посмотрите твит от @minamarkham. Эти системы должны использовать проценты для интервалов, чтобы создать «сетку».
Существует также несоответствие касательно процентного значения grid-row-gap, если высота сетки не является фиксированной. Chrome, Safari TP, и Edge Preview сжимают разрыв между рядами до 0. Firefox вероятно использует проценты от общей высоты сетки.
8. Установка максимальной высоты в процентах должна уменьшать изображение большего размера внутри направляющих сетки
| Примеры | Пострадавшие браузеры | Отслеживание ошибок |
|---|---|---|
| 8.1 — bug | Chrome | Chromium #750631 |
С помощью max-height изображение внутри направляющих фиксированного размера должно быть распределено так, чтобы изображение масштабировалось и помещалось внутри сетки.На данный момент в Chrome это не работает и изображение вылезает за направляющие сетки. Использование max-width работает, когда изображение ограничено размером направляющих столбца, установка фиксированной высоты работает так, как ожидалось, как и установка максимальной высоты с использованием px (пикселей) в качестве единицы измерения.
| Примеры | Пострадавшие браузеры | Отслеживание ошибок |
|---|---|---|
| 9.1 — bug | Safari 10 (fixed in Technology Preview) | WebKit #169195 |
В Safari 10, значения min-content, max-content и fit-content были под префиксами. В Safari Technology Preview они уже работают без префиксов.
Как временное решение используйте префиксы -webkit-min-content, -webkit-max-content и -webkit-fit-content.
| Примеры | Пострадавшие браузеры | Отслеживание ошибок |
|---|---|---|
|
10.1 — bug (fieldset) 10.2 — bug (button) |
Chrome Safari 10 (fieldset fixed in Technology Preview) |
Chromium #375693 |
В Chrome (и Safari 10) некоторые строчные элементы с display: grid не работают как грид-контейнер. Элемент button функционирует только как контейнер сетки в Firefox. Эта же проблема есть и в Flexbox: подробней на странице Flexbugs.
| Примеры | Пострадавшие браузеры | Отслеживание ошибок |
|---|---|---|
| 11.1 — bug | Chrome (on OSX only) | Chromium #727076 |
В OS X Chrome, если текстовая область является элементом сетки, её ширина сворачивается до 0, когда в неё начинают вводить текст. Ссылка на пример ведет на Chromium, поскольку из-за того, как CodePen загружается в iframe, баг, похоже, не воспроизводится.
| Примеры | Пострадавшие браузеры | Отслеживание ошибок |
|---|---|---|
|
12.1 — bug 1 12.2 — bug 2 |
Firefox |
Firefox #1386921 Firefox #1386932 |
Если у вас есть сетка с пустыми дорожками, которые связаны с элементами в сетке, этим дорожкам не следует назначать дополнительное пространство из-за перекрывания элемента. Firefox назначает дополнительное пространство (bug#1), связанный с тем, что Firefox делает разные вещи в зависимости от исходного порядка (bug#2).
Спасибо всем, кто помог изолировать эти баги здесь. Дискуссия будет вам очень полезна, если вы действительно хотите разобраться в причинах багов.
| Примеры | Пострадавшие браузеры | Отслеживание ошибок |
|---|---|---|
| 13.1 — bug |
Firefox & Edge match Chrome & Webkit match |
Chrome #229568 |
Как указывает @mrego, существует многолетняя проблема совместимости с процентным заполнением и полями как в Grid, так и в Flexbox.
Firefox и Edge (Preview) разрешают процентные margin/padding для элементов в соответствии с их размером (шириной или высотой), Chrome всегда использует ширину, точно так же, как проценты разрешены в блочном лейауте. Спецификация допускает обе возможности и предполагает, что авторы не используют процентные паддинги и марджины.
| Примеры | Пострадавшие браузеры | Отслеживание ошибок |
|---|---|---|
| 14.1 — bug |
Chrome Webkit |
Chrome #755994 |
@simevidas заявляет, что Chrome растягивает направляющии по размеру fit-content, а Firefox нет. Я считаю, что Firefox ведет себя в этом случае корректно, и направляющие должны быть привязаны к значению длины, если контент превышает значение. Edge (Preview) ведет себя в этом случае так же как и Firefox.
Обходным путем для этого является использование justify-content: start или justify-content: end для направляющих.
Gridbugs курируется и создан @rachelandrew под вдохновлением от замечательного Flexbugs.
Автор данного перевода - Владимир Гуменюк (Vladimir Humeniuk).
Прежде всего создавая новую ошибку, прикрепляйте сокращенный пример кода и пути воспроизведения ошибки. Если вам известны обходные пути также опишите их.