Chrome 80 css сетка больших потомков вызывает рост сетки - PullRequest
Новая
       27

Chrome 80 css сетка больших потомков вызывает рост сетки

2 голосов
/ 13 февраля 2020

Когда сетка имеет фиксированную ширину и высоту, а потомок сетки имеет ширину или высоту, которые больше, чем у сетки, потомок заставляет сетку «расти», чтобы соответствовать ей. В предыдущих версиях Chrome (до 80) и в последней версии Firefox (73.0 на момент написания этой статьи) потомки сетки уважали границы сетки. Я посмотрел журнал релизов для этого обновления и не могу найти упоминаний об изменениях grid или grid-template-rows/columns.

  • Ожидаемое поведение ( Предварительно Chrome 80 / Firefox) Expected Behaviour (Pre Chrome 80/Firefox)
  • Фактическое поведение (Chrome 80) Actual Behaviour (Chrome 80)

Ниже приведен минимальный фрагмент для воспроизведения проблемы. 

<div style="
    background-color: lightgray;
    display: grid;
    grid-column-gap: 20px;
    grid-template-areas:
        'header header'
        'form chart'
        'footer chart';
    grid-template-columns: minmax(250px,1fr) 2fr;
    grid-template-rows: 1fr 5fr 1fr;
    height: 330px;
    padding: 20px;
    width: 690px;
">
  <div style="background: red; grid-area: header;"></div>
  <div style="background: green; grid-area: form;"></div>
  <div style="background: blue;grid-area: chart">
    <div style="height: 500px;"></div>
  </div>
  <div style="background: purple; grid-area: footer;"></div>
</div>

У меня такой вопрос: это ошибка chrome или это chrome выравнивание по сетке css spe c?

Ответы [ 3 ]

3 голосов
/ 18 февраля 2020

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

Я нашел следующее в google chromium sr c изменения

Восстановить "[css -grid] Размещать связующие элементы, пересекающие гибкие пути "https://chromium.googlesource.com/chromium/src/+/b1738fb61215bb8610e08f65de4d01681e250f7f

Также возникли еще два вопроса с этой же проблемой для тех, кто ищет.

Сетка-шаблон-столбцы в Chrome 80 непоследовательно вычисляется

Почему Chrome 80 вызывает эту строку-шаблон-строки: автоматическая проблема

Я новичок здесь (отвечаю), поэтому я не смог прокомментировать их в ответе на запрос подтверждения.

1 голос
/ 18 февраля 2020

Причиной этого является реализация CSS Grid spe c change относительно вклада дорожек сетки, охватывающих как дорожки конечного, так и бесконечного размера. Я поднял проблему и по этому поводу.

Рад, что команда разработчиков Chromium согласилась, что это изменение не совместимо с сетью и вызывает слишком много поломок . Он уже возвращен в ответвлениях M80, M81 и M82 и будет доставлен с обращенным поведением (поведение до 80) на этой неделе в ответе 116 (80.0.3987.116).

Редактировать: На данный момент новая версия Chrome вышла и исправляет эти проблемы.

Редактировать 2: Поскольку команда Chromium была единственной командой браузеров, которая фактически реализовала указанное изменение c, и они решили вернуть его, разработчик, который реализовал изменения, поднял issue@CSSWG. Свяжите себя с этим, если хотите увидеть, куда это идет.

enter image description here

0 голосов
/ 13 февраля 2020

Пожалуйста, обновите ниже HTML

<div style="
    background-color: lightgray;
    display: grid;
    grid-column-gap: 20px;
    grid-template-areas:
        'header header'
        'form chart'
        'footer chart';
    grid-template-columns: minmax(250px,1fr) 2fr;
    grid-template-rows: 1fr 5fr 1fr;
    height: 330px;
    padding: 20px;
    width: 690px;
">
  <div style="background: red; grid-area: header;"></div>
  <div style="background: green; grid-area: form;"></div>
  <div style="background: blue;grid-area: chart">
    <div style="height: 500px;display: inline;"></div>
  </div>
  <div style="background: purple; grid-area: footer;"></div>
</div>
</div>
...