Skip to content

Перевод списка багов в CSS Grid Layout, курируемого Рейчел Эндрю

License

Notifications You must be signed in to change notification settings

VladimirHumeniuk/gridbugs-ru

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 

Repository files navigation

GridBugs

Вдохновленный Flexbugs этот список предназначен для того, чтобы быть курируемым списком ошибок, багов, неполных реализаций и особенностей работы CSS Grid Layout в разных браузерах. Grid реализован в браузерах в работоспособном состоянии, однако есть некоторые проблемы - давайте документировать их все здесь.

Здесь мне хотелось бы сосредоточиться на вопросах, связанных со спецификацией Grid, но вполне вероятно, что придется отдельно ссылаться на некоторые другие спецификации, такие как Box Alignment. Если вы считаете, что заметили проблему, и, похоже, она относится к Гридам, опубликуйте её. Мы сможем подробно разобраться в деталях и убедиться, что проблемы с реализацией в браузере или ошибки спецификации попали в нужное место.

Также, пожалуйста, поднимите вопрос, если я ошибаюсь в отношении любого из описаных багов или у вас есть дополнительная информация или примеры для добавления. Вероятно, я мог сослаться на неправильный UA или пропустил изменение в спецификации. Помогите сделать список более точным и актуальным!

Это не техническая поддержка CSS Grid

Присылая вопрос, пожалуйста, подробно опишите путь воспроизведения проблемы и создайте Сокращенный Тестовый Пример, чтобы проверить, что проблема не является следствием вашего кода. Если вы хотите больше узнать о CSS Grid Layout, посмотрите на Гриды в Примерах где вы найдете видеоуроки, примеры и ссылки на другие полезные ресурсы. На больше вопросов о CSS Гридах я отвечу в своем AMA когда будет время. Также я собрал нужную информацию о фоллбеках для старых браузеров.

Баги

  1. grid-auto-rows и grid-auto-columns должен принимать список направляющих.
  2. Повторная нотация должна заново принимать список направляющих.
  3. Поддержка фрагментации.
  4. Выравнивание элементов с собственными размерами в сетках с фиксированными направляющими.
  5. Элементы с внутренним соотношением сторон должны выравниваться в начале.
  6. grid-gap параметры должны принимать значение в процентах.
  7. Grid отступы должны вести себя как направляющие с авто-размерами?
  8. Установка максимальной высоты в процентах должна уменьшать изображение большего размера внутри направляющих сетки.
  9. min-content и max-content в направляющих.
  10. Некоторые HTML элементы не могут быть грид-контейнерами.
  11. Текстовое поле, которое является элементом сетки, сворачивается до нулевой ширины.
  12. Пространство, распространяемое на пустые направляющие, растягивается элементами с контентом.
  13. Несостыковки с процентными паддингами и марджинами.
  14. fit-content растягивается.

1. grid-auto-rows и grid-auto-columns должен принимать список направляющих.

Примеры Пострадавшие браузеры Отслеживание ошибок Тесты
1.1bug Firefox Firefox #1339672 WPT

Параметрыgrid-auto-rows и grid-auto-columns дают возможность задавать размеры направляющих в неявных сетках. Спецификация говорит:

"Если заданы несколько размеров направляющих, шаблон повторяется по мере необходимости, чтобы найти размеры неявных направляющих. Первая неявная направляющая сетки перед явной сеткой принимает первый указанный размер и так далее вперед.; И последняя неявная направляющая сетки до того, как явная сетка получит последний указанный размер и так далее в обратном порядке." - 7.6 Implicit Track Sizing (Размеры Неявных Направляющих)

2. Повторная нотация должна заново принимать список направляющих.

Примеры Пострадавшие браузеры Отслеживание ошибок
2.1bug Firefox Firefox #1341507

Повторная нотация может принимать однотипное значение направляющей для повторения, например:

repeat(3,200px);

Или для списка направляющих:

repeat(3, 200px 100px);

Это возможно когда числа повторяются как auto-fill или auto-fit для объявления как можно большего количества направляющих.

"Первый аргумент указывает количество повторений. Второй аргумент - это список направляющих, которые повторяются определенное количество раз." - Синтакс repeat()

3. Поддержка фрагментации

Примеры Пострадавшие браузеры Отслеживание ошибок
Firefox
Chrome
Safari
Firefox #1266265
Chrome #614667

В настоящее время существует ограниченная поддержка фрагментации в браузерах, поэтому такие функции, как свойства break-* вряд ли будут адекватно работать. Подробнее о том, как должна работать фрагментация в CSS Grid Layout: 12. Fragmenting Grid Layout.

4. Выравнивание элементов с собственными размерами в сетках с фиксированными направляющими

Примеры Пострадавшие браузеры Отслеживание ошибок
4.1bug Firefox Firefox #1385410

В Firefox элементы с внутренним размером масштабируются, чтобы вписаться в сетку с фиксированным размером, а не вылезать за неё.

Я считаю, что правильное поведение в данном кейсе состоит в переполнении элементов с фиксированным размером, в соответствии с резолюцией WG Issue 523.

5. Элементы с внутренним соотношением сторон должны выравниваться в начале

Примеры Пострадавшие браузеры Отслеживание ошибок
5.1bug
5.2workaround
Safari 10 (fixed in Technical Preview)

В Safari 10 элемент сетки поумолчанию выравнивался как stretch, а не start.

Временное решение

Временным решением проблемы является декларирование align-self: start и justify-self: start для элемента.

6. The grid-gap параметры должны принимать значение в процентах

Примеры Пострадавшие браузеры Отслеживание ошибок
6.1bug Safari 10 (fixed in Technical Preview 29) WebKit #170764

В настоящее время процентные значения grid-gap помечаются как рискованные в Уровне 1 спецификации. Сильным вариантом использования для процентного значения является добавление некоторых функций грид-лейаута к макету, который уже использует разметку на флоатах или флексбоксах: посмотрите твит от @minamarkham. Эти системы должны использовать проценты для интервалов, чтобы создать «сетку».

7. Grid отступы должны вести себя как направляющие с авто-размерами?

Существует также несоответствие касательно процентного значения grid-row-gap, если высота сетки не является фиксированной. Chrome, Safari TP, и Edge Preview сжимают разрыв между рядами до 0. Firefox вероятно использует проценты от общей высоты сетки.

8. Установка максимальной высоты в процентах должна уменьшать изображение большего размера внутри направляющих сетки

Примеры Пострадавшие браузеры Отслеживание ошибок
8.1bug Chrome Chromium #750631

С помощью max-height изображение внутри направляющих фиксированного размера должно быть распределено так, чтобы изображение масштабировалось и помещалось внутри сетки.На данный момент в Chrome это не работает и изображение вылезает за направляющие сетки. Использование max-width работает, когда изображение ограничено размером направляющих столбца, установка фиксированной высоты работает так, как ожидалось, как и установка максимальной высоты с использованием px (пикселей) в качестве единицы измерения.

9. min-content и max-content в направляющих

Примеры Пострадавшие браузеры Отслеживание ошибок
9.1bug 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. Некоторые HTML элементы не могут быть грид-контейнерами

Примеры Пострадавшие браузеры Отслеживание ошибок
10.1bug (fieldset)
10.2bug (button)
Chrome
Safari 10 (fieldset fixed in Technology Preview)
Chromium #375693

В Chrome (и Safari 10) некоторые строчные элементы с display: grid не работают как грид-контейнер. Элемент button функционирует только как контейнер сетки в Firefox. Эта же проблема есть и в Flexbox: подробней на странице Flexbugs.

11. Текстовое поле, которое является элементом сетки, сворачивается до нулевой ширины

Примеры Пострадавшие браузеры Отслеживание ошибок
11.1bug Chrome (on OSX only) Chromium #727076

В OS X Chrome, если текстовая область является элементом сетки, её ширина сворачивается до 0, когда в неё начинают вводить текст. Ссылка на пример ведет на Chromium, поскольку из-за того, как CodePen загружается в iframe, баг, похоже, не воспроизводится.

12. Пространство, распространяемое на пустые направляющие, растягивается элементы с контентом

Примеры Пострадавшие браузеры Отслеживание ошибок
12.1bug 1
12.2bug 2
Firefox Firefox #1386921
Firefox #1386932

Если у вас есть сетка с пустыми дорожками, которые связаны с элементами в сетке, этим дорожкам не следует назначать дополнительное пространство из-за перекрывания элемента. Firefox назначает дополнительное пространство (bug#1), связанный с тем, что Firefox делает разные вещи в зависимости от исходного порядка (bug#2).

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

13. Несостыковки с процентными паддингами и марджинами

Примеры Пострадавшие браузеры Отслеживание ошибок
13.1 — bug Firefox & Edge match
Chrome & Webkit match
Chrome #229568

Как указывает @mrego, существует многолетняя проблема совместимости с процентным заполнением и полями как в Grid, так и в Flexbox.

Firefox и Edge (Preview) разрешают процентные margin/padding для элементов в соответствии с их размером (шириной или высотой), Chrome всегда использует ширину, точно так же, как проценты разрешены в блочном лейауте. Спецификация допускает обе возможности и предполагает, что авторы не используют процентные паддинги и марджины.

14. fit-content растягивается

Примеры Пострадавшие браузеры Отслеживание ошибок
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).

Другие языки

Английский

Содействие

Прежде всего создавая новую ошибку, прикрепляйте сокращенный пример кода и пути воспроизведения ошибки. Если вам известны обходные пути также опишите их.

About

Перевод списка багов в CSS Grid Layout, курируемого Рейчел Эндрю

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published