个人中心
gpt4 book ai didi

html - css 网格与 flexbox : why does css grid cause repaints and flexbox not

转载 作者：行者123 更新时间：2023-12-03 17:19:58 24 4
gpt4 key购买 nike

我非常喜欢 css grid，因为它很简单。但是 flexbox 没有的 css grid 似乎存在性能问题。
我已经实现了一个两列全屏页面，两列都有一个带有输入框的表单和一个带有溢出-y:auto 的元素列表。一个使用 flexbox 实现左右面板的示例，以及使用 css grid 实现左右面板的一个示例。
这是 flexbox 版本:https://web-platform-wtfgmj.stackblitz.io/
这是 css 网格版本:https://web-platform-wtfgmj.stackblitz.io/index2.html
在 chrome 中打开开发者工具并启用绘画闪烁(必须启用工具/渲染)。
在输入框之一中键入时，css 网格版本将重新绘制列表中的所有元素。 flexbox 版本没有这个问题。
我想了解为什么 css grid 在输入框中键入时会重新绘制列表中的所有元素？它可以以某种方式避免吗？
更新:似乎是 stackblitz 的问题...
包含为代码片段
更新 2:因为它有点被评论所掩盖:
所以我用 chrome 提交了一个错误报告(bugs.chromium.org/p/chromium/issues/detail?id=1204446，根据 dgrogan 的建议)，他们似乎确认这是 chrome 当前网格实现的性能问题。显然他们正忙于一个新的实现 LayoutNGGrid 来解决这个问题

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  box-shadow: none;
}
my-app {
  display: flex;
  flex-flow: column;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 0, 0, 0.1);
}

.header {
  display: grid;
  grid-template-columns: 3fr 7fr;
  grid-template-rows: 1em;
  gap: 0.6em;
  align-items: flex-start;
  margin: 1em;
}

.itemspanel {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column;
  min-height: 0;
}

.itemheader {
  flex: 0 0 auto;
}

.items {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
  overflow-y: auto;
  min-height: 0;
}

.itemrow {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 1em;
}
.itemrow > span:nth-child(1) {
  flex-basis: 30%;
  flex-grow: 1;
}
.itemrow > span:nth-child(2) {
  flex-basis: 70%;
  flex-grow: 1;
}

.itemrowgrid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 0 0.5em 1em 0.5em;
}

.panels {
  flex: 1 1 100%;
  display: grid;
  grid-template:
    "left right" 1fr
    / 1fr 2fr;
  gap: 1em;
  min-height: 0;
}
.panelleft {
  display: flex;
  flex-flow: column;
  grid-area: left;
  min-height: 0;
}
.panelright {
  display: flex;
  flex-flow: column;
  grid-area: right;
  min-height: 0;
}
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <my-app ng-version="11.0.8">
    <div class="panels">
      <div class="panelleft">
        <form novalidate="" name="frmFilters" autocomplete="off" class="header ng-valid ng-touched ng-dirty">
          <label >Search:</label><input  type="text" name="name" ng-reflect-name="name" ng-reflect-model="00000" class="ng-valid ng-touched ng-dirty"><label ></label><button  type="button">Search</button>
        </form>
        <div class="itemspanel">
          <div class="itemheader"></div>
          <div class="items">
            <div class="itemrowgrid"><span >Joelynn</span><span >Hitzmann</span></div>
            <div class="itemrowgrid"><span >Farris</span><span >Espine</span></div>
            <div class="itemrowgrid"><span >Linnet</span><span >Nare</span></div>
            <div class="itemrowgrid"><span >Heidie</span><span >Coolican</span></div>
            <div class="itemrowgrid"><span >Ulrike</span><span >Lowndsborough</span></div>
            <div class="itemrowgrid"><span >Claudine</span><span >Caneo</span></div>
            <div class="itemrowgrid"><span >Janella</span><span >Thurborn</span></div>
            <div class="itemrowgrid"><span >Menard</span><span >Wolledge</span></div>
            <div class="itemrowgrid"><span >Alasteir</span><span >Annandale</span></div>
            <div class="itemrowgrid"><span >Isabelita</span><span >Byrom</span></div>
            <div class="itemrowgrid"><span >Jim</span><span >Issard</span></div>
            <div class="itemrowgrid"><span >Mic</span><span >Tiddeman</span></div>
            <div class="itemrowgrid"><span >Carce</span><span >McClunaghan</span></div>
            <div class="itemrowgrid"><span >Archibaldo</span><span >Jacqueme</span></div>
            <div class="itemrowgrid"><span >Sybilla</span><span >Vivyan</span></div>
            <div class="itemrowgrid"><span >Herve</span><span >Lund</span></div>
            <div class="itemrowgrid"><span >Wade</span><span >Calway</span></div>
            <div class="itemrowgrid"><span >Irita</span><span >Newvell</span></div>
            <div class="itemrowgrid"><span >Lucie</span><span >Hurrion</span></div>
            <div class="itemrowgrid"><span >Sherie</span><span >Bapty</span></div>
            <div class="itemrowgrid"><span >Estella</span><span >Lettington</span></div>
            <div class="itemrowgrid"><span >Lion</span><span >Ganforthe</span></div>
            <div class="itemrowgrid"><span >Siouxie</span><span >January 1st</span></div>
            <div class="itemrowgrid"><span >Clay</span><span >Knightsbridge</span></div>
            <div class="itemrowgrid"><span >Shir</span><span >Desesquelle</span></div>
            <div class="itemrowgrid"><span >Magda</span><span >Brew</span></div>
            <div class="itemrowgrid"><span >Didi</span><span >Scanlon</span></div>
            <div class="itemrowgrid"><span >Petr</span><span >Clerk</span></div>
            <div class="itemrowgrid"><span >Frazier</span><span >Harler</span></div>
            <div class="itemrowgrid"><span >Deonne</span><span >Scoffham</span></div>
            <div class="itemrowgrid"><span >Meggi</span><span >Klampk</span></div>
            <div class="itemrowgrid"><span >Darby</span><span >Huey</span></div>
            <div class="itemrowgrid"><span >Berna</span><span >Batram</span></div>
            <div class="itemrowgrid"><span >Ashli</span><span >Ducarel</span></div>
            <div class="itemrowgrid"><span >Marilin</span><span >Gothup</span></div>
            <div class="itemrowgrid"><span >Mariya</span><span >Fettis</span></div>
            <div class="itemrowgrid"><span >Anett</span><span >Stookes</span></div>
            <div class="itemrowgrid"><span >Adella</span><span >Wash</span></div>
            <div class="itemrowgrid"><span >Ricky</span><span >Pellamonuten</span></div>
            <div class="itemrowgrid"><span >Nora</span><span >Hourigan</span></div>
            <div class="itemrowgrid"><span >Pancho</span><span >Wynn</span></div>
            <div class="itemrowgrid"><span >Magdaia</span><span >Walthall</span></div>
            <div class="itemrowgrid"><span >Thatch</span><span >Llorente</span></div>
            <div class="itemrowgrid"><span >Margaretta</span><span >Ramiro</span></div>
            <div class="itemrowgrid"><span >Jacques</span><span >Smallacombe</span></div>
            <div class="itemrowgrid"><span >Gamaliel</span><span >Learoyd</span></div>
            <div class="itemrowgrid"><span >Jyoti</span><span >Sholl</span></div>
            <div class="itemrowgrid"><span >Elbertine</span><span >Larwell</span></div>
            <div class="itemrowgrid"><span >Sebastian</span><span >Alvarado</span></div>
            <div class="itemrowgrid"><span >Mart</span><span >Hentzeler</span></div>
          </div>
        </div>
      </div>
      <div class="panelright d2">
        <form novalidate="" name="frmFilters" autocomplete="off" class="header ng-valid ng-dirty ng-touched">
          <label >Search:</label><input  type="text" name="name1" ng-reflect-name="name1" ng-reflect-model="0000" class="ng-valid ng-dirty ng-touched"><label ></label><button  type="button">Search</button>
        </form>
        <div class="itemspanel">
          <div class="itemheader"></div>
          <div class="items">
            <div class="itemrowgrid"><span >Joelynn</span><span >Hitzmann</span></div>
            <div class="itemrowgrid"><span >Farris</span><span >Espine</span></div>
            <div class="itemrowgrid"><span >Linnet</span><span >Nare</span></div>
            <div class="itemrowgrid"><span >Heidie</span><span >Coolican</span></div>
            <div class="itemrowgrid"><span >Ulrike</span><span >Lowndsborough</span></div>
            <div class="itemrowgrid"><span >Claudine</span><span >Caneo</span></div>
            <div class="itemrowgrid"><span >Janella</span><span >Thurborn</span></div>
            <div class="itemrowgrid"><span >Menard</span><span >Wolledge</span></div>
            <div class="itemrowgrid"><span >Alasteir</span><span >Annandale</span></div>
            <div class="itemrowgrid"><span >Isabelita</span><span >Byrom</span></div>
            <div class="itemrowgrid"><span >Jim</span><span >Issard</span></div>
            <div class="itemrowgrid"><span >Mic</span><span >Tiddeman</span></div>
            <div class="itemrowgrid"><span >Carce</span><span >McClunaghan</span></div>
            <div class="itemrowgrid"><span >Archibaldo</span><span >Jacqueme</span></div>
            <div class="itemrowgrid"><span >Sybilla</span><span >Vivyan</span></div>
            <div class="itemrowgrid"><span >Herve</span><span >Lund</span></div>
            <div class="itemrowgrid"><span >Wade</span><span >Calway</span></div>
            <div class="itemrowgrid"><span >Irita</span><span >Newvell</span></div>
            <div class="itemrowgrid"><span >Lucie</span><span >Hurrion</span></div>
            <div class="itemrowgrid"><span >Sherie</span><span >Bapty</span></div>
            <div class="itemrowgrid"><span >Estella</span><span >Lettington</span></div>
            <div class="itemrowgrid"><span >Lion</span><span >Ganforthe</span></div>
            <div class="itemrowgrid"><span >Siouxie</span><span >January 1st</span></div>
            <div class="itemrowgrid"><span >Clay</span><span >Knightsbridge</span></div>
            <div class="itemrowgrid"><span >Shir</span><span >Desesquelle</span></div>
            <div class="itemrowgrid"><span >Magda</span><span >Brew</span></div>
            <div class="itemrowgrid"><span >Didi</span><span >Scanlon</span></div>
            <div class="itemrowgrid"><span >Petr</span><span >Clerk</span></div>
            <div class="itemrowgrid"><span >Frazier</span><span >Harler</span></div>
            <div class="itemrowgrid"><span >Deonne</span><span >Scoffham</span></div>
            <div class="itemrowgrid"><span >Meggi</span><span >Klampk</span></div>
            <div class="itemrowgrid"><span >Darby</span><span >Huey</span></div>
            <div class="itemrowgrid"><span >Berna</span><span >Batram</span></div>
            <div class="itemrowgrid"><span >Ashli</span><span >Ducarel</span></div>
            <div class="itemrowgrid"><span >Marilin</span><span >Gothup</span></div>
            <div class="itemrowgrid"><span >Mariya</span><span >Fettis</span></div>
            <div class="itemrowgrid"><span >Anett</span><span >Stookes</span></div>
            <div class="itemrowgrid"><span >Adella</span><span >Wash</span></div>
            <div class="itemrowgrid"><span >Ricky</span><span >Pellamonuten</span></div>
            <div class="itemrowgrid"><span >Nora</span><span >Hourigan</span></div>
            <div class="itemrowgrid"><span >Pancho</span><span >Wynn</span></div>
            <div class="itemrowgrid"><span >Magdaia</span><span >Walthall</span></div>
            <div class="itemrowgrid"><span >Thatch</span><span >Llorente</span></div>
            <div class="itemrowgrid"><span >Margaretta</span><span >Ramiro</span></div>
            <div class="itemrowgrid"><span >Jacques</span><span >Smallacombe</span></div>
            <div class="itemrowgrid"><span >Gamaliel</span><span >Learoyd</span></div>
            <div class="itemrowgrid"><span >Jyoti</span><span >Sholl</span></div>
            <div class="itemrowgrid"><span >Elbertine</span><span >Larwell</span></div>
            <div class="itemrowgrid"><span >Sebastian</span><span >Alvarado</span></div>
            <div class="itemrowgrid"><span >Mart</span><span >Hentzeler</span></div>
          </div>
        </div>
      </div>
    </div>

  </my-app>
</body>

</html>



html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  box-shadow: none;
}



my-app {
  display: flex;
  flex-flow: column;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 0, 0, 0.1);
}

.header {
  display: grid;
  grid-template-columns: 3fr 7fr;
  grid-template-rows: 1em;
  gap: 0.6em;
  align-items: flex-start;
  margin: 1em;
}

.itemspanel {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column;
  min-height: 0;
}

.itemheader {
  flex: 0 0 auto;
}

.items {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
  overflow-y: auto;
  min-height: 0;
}

.itemrow {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 1em;
}
.itemrow > span:nth-child(1) {
  flex-basis: 30%;
  flex-grow: 1;
}
.itemrow > span:nth-child(2) {
  flex-basis: 70%;
  flex-grow: 1;
}

.itemrowgrid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 0 0.5em 1em 0.5em;
}

.panels {
  flex: 1 1 100%;
  display: flex;
  flex-flow: row;
  min-height: 0;
}
.panelleft,
.panelright {
  display: flex;
  flex-flow: column;
  min-height: 0;
}

.panelleft {
  flex: 1 1 100%;
}
.panelright {
  flex: 1 1 200%;
}
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="reset.css">
  <link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
  <my-app ng-version="11.0.8">
    <div class="panels">
      <div class="panelleft">
        <form novalidate="" name="frmFilters" autocomplete="off" class="header ng-valid ng-touched ng-dirty">
          <label >Search:</label><input  type="text" name="name" ng-reflect-name="name" ng-reflect-model="00000" class="ng-valid ng-touched ng-dirty"><label ></label><button  type="button">Search</button>
        </form>
        <div class="itemspanel">
          <div class="itemheader"></div>
          <div class="items">
            <div class="itemrowgrid"><span >Joelynn</span><span >Hitzmann</span></div>
            <div class="itemrowgrid"><span >Farris</span><span >Espine</span></div>
            <div class="itemrowgrid"><span >Linnet</span><span >Nare</span></div>
            <div class="itemrowgrid"><span >Heidie</span><span >Coolican</span></div>
            <div class="itemrowgrid"><span >Ulrike</span><span >Lowndsborough</span></div>
            <div class="itemrowgrid"><span >Claudine</span><span >Caneo</span></div>
            <div class="itemrowgrid"><span >Janella</span><span >Thurborn</span></div>
            <div class="itemrowgrid"><span >Menard</span><span >Wolledge</span></div>
            <div class="itemrowgrid"><span >Alasteir</span><span >Annandale</span></div>
            <div class="itemrowgrid"><span >Isabelita</span><span >Byrom</span></div>
            <div class="itemrowgrid"><span >Jim</span><span >Issard</span></div>
            <div class="itemrowgrid"><span >Mic</span><span >Tiddeman</span></div>
            <div class="itemrowgrid"><span >Carce</span><span >McClunaghan</span></div>
            <div class="itemrowgrid"><span >Archibaldo</span><span >Jacqueme</span></div>
            <div class="itemrowgrid"><span >Sybilla</span><span >Vivyan</span></div>
            <div class="itemrowgrid"><span >Herve</span><span >Lund</span></div>
            <div class="itemrowgrid"><span >Wade</span><span >Calway</span></div>
            <div class="itemrowgrid"><span >Irita</span><span >Newvell</span></div>
            <div class="itemrowgrid"><span >Lucie</span><span >Hurrion</span></div>
            <div class="itemrowgrid"><span >Sherie</span><span >Bapty</span></div>
            <div class="itemrowgrid"><span >Estella</span><span >Lettington</span></div>
            <div class="itemrowgrid"><span >Lion</span><span >Ganforthe</span></div>
            <div class="itemrowgrid"><span >Siouxie</span><span >January 1st</span></div>
            <div class="itemrowgrid"><span >Clay</span><span >Knightsbridge</span></div>
            <div class="itemrowgrid"><span >Shir</span><span >Desesquelle</span></div>
            <div class="itemrowgrid"><span >Magda</span><span >Brew</span></div>
            <div class="itemrowgrid"><span >Didi</span><span >Scanlon</span></div>
            <div class="itemrowgrid"><span >Petr</span><span >Clerk</span></div>
            <div class="itemrowgrid"><span >Frazier</span><span >Harler</span></div>
            <div class="itemrowgrid"><span >Deonne</span><span >Scoffham</span></div>
            <div class="itemrowgrid"><span >Meggi</span><span >Klampk</span></div>
            <div class="itemrowgrid"><span >Darby</span><span >Huey</span></div>
            <div class="itemrowgrid"><span >Berna</span><span >Batram</span></div>
            <div class="itemrowgrid"><span >Ashli</span><span >Ducarel</span></div>
            <div class="itemrowgrid"><span >Marilin</span><span >Gothup</span></div>
            <div class="itemrowgrid"><span >Mariya</span><span >Fettis</span></div>
            <div class="itemrowgrid"><span >Anett</span><span >Stookes</span></div>
            <div class="itemrowgrid"><span >Adella</span><span >Wash</span></div>
            <div class="itemrowgrid"><span >Ricky</span><span >Pellamonuten</span></div>
            <div class="itemrowgrid"><span >Nora</span><span >Hourigan</span></div>
            <div class="itemrowgrid"><span >Pancho</span><span >Wynn</span></div>
            <div class="itemrowgrid"><span >Magdaia</span><span >Walthall</span></div>
            <div class="itemrowgrid"><span >Thatch</span><span >Llorente</span></div>
            <div class="itemrowgrid"><span >Margaretta</span><span >Ramiro</span></div>
            <div class="itemrowgrid"><span >Jacques</span><span >Smallacombe</span></div>
            <div class="itemrowgrid"><span >Gamaliel</span><span >Learoyd</span></div>
            <div class="itemrowgrid"><span >Jyoti</span><span >Sholl</span></div>
            <div class="itemrowgrid"><span >Elbertine</span><span >Larwell</span></div>
            <div class="itemrowgrid"><span >Sebastian</span><span >Alvarado</span></div>
            <div class="itemrowgrid"><span >Mart</span><span >Hentzeler</span></div>
          </div>
        </div>
      </div>
      <div class="panelright d2">
        <form novalidate="" name="frmFilters" autocomplete="off" class="header ng-valid ng-dirty ng-touched">
          <label >Search:</label><input  type="text" name="name1" ng-reflect-name="name1" ng-reflect-model="0000" class="ng-valid ng-dirty ng-touched"><label ></label><button  type="button">Search</button>
        </form>
        <div class="itemspanel">
          <div class="itemheader"></div>
          <div class="items">
            <div class="itemrowgrid"><span >Joelynn</span><span >Hitzmann</span></div>
            <div class="itemrowgrid"><span >Farris</span><span >Espine</span></div>
            <div class="itemrowgrid"><span >Linnet</span><span >Nare</span></div>
            <div class="itemrowgrid"><span >Heidie</span><span >Coolican</span></div>
            <div class="itemrowgrid"><span >Ulrike</span><span >Lowndsborough</span></div>
            <div class="itemrowgrid"><span >Claudine</span><span >Caneo</span></div>
            <div class="itemrowgrid"><span >Janella</span><span >Thurborn</span></div>
            <div class="itemrowgrid"><span >Menard</span><span >Wolledge</span></div>
            <div class="itemrowgrid"><span >Alasteir</span><span >Annandale</span></div>
            <div class="itemrowgrid"><span >Isabelita</span><span >Byrom</span></div>
            <div class="itemrowgrid"><span >Jim</span><span >Issard</span></div>
            <div class="itemrowgrid"><span >Mic</span><span >Tiddeman</span></div>
            <div class="itemrowgrid"><span >Carce</span><span >McClunaghan</span></div>
            <div class="itemrowgrid"><span >Archibaldo</span><span >Jacqueme</span></div>
            <div class="itemrowgrid"><span >Sybilla</span><span >Vivyan</span></div>
            <div class="itemrowgrid"><span >Herve</span><span >Lund</span></div>
            <div class="itemrowgrid"><span >Wade</span><span >Calway</span></div>
            <div class="itemrowgrid"><span >Irita</span><span >Newvell</span></div>
            <div class="itemrowgrid"><span >Lucie</span><span >Hurrion</span></div>
            <div class="itemrowgrid"><span >Sherie</span><span >Bapty</span></div>
            <div class="itemrowgrid"><span >Estella</span><span >Lettington</span></div>
            <div class="itemrowgrid"><span >Lion</span><span >Ganforthe</span></div>
            <div class="itemrowgrid"><span >Siouxie</span><span >January 1st</span></div>
            <div class="itemrowgrid"><span >Clay</span><span >Knightsbridge</span></div>
            <div class="itemrowgrid"><span >Shir</span><span >Desesquelle</span></div>
            <div class="itemrowgrid"><span >Magda</span><span >Brew</span></div>
            <div class="itemrowgrid"><span >Didi</span><span >Scanlon</span></div>
            <div class="itemrowgrid"><span >Petr</span><span >Clerk</span></div>
            <div class="itemrowgrid"><span >Frazier</span><span >Harler</span></div>
            <div class="itemrowgrid"><span >Deonne</span><span >Scoffham</span></div>
            <div class="itemrowgrid"><span >Meggi</span><span >Klampk</span></div>
            <div class="itemrowgrid"><span >Darby</span><span >Huey</span></div>
            <div class="itemrowgrid"><span >Berna</span><span >Batram</span></div>
            <div class="itemrowgrid"><span >Ashli</span><span >Ducarel</span></div>
            <div class="itemrowgrid"><span >Marilin</span><span >Gothup</span></div>
            <div class="itemrowgrid"><span >Mariya</span><span >Fettis</span></div>
            <div class="itemrowgrid"><span >Anett</span><span >Stookes</span></div>
            <div class="itemrowgrid"><span >Adella</span><span >Wash</span></div>
            <div class="itemrowgrid"><span >Ricky</span><span >Pellamonuten</span></div>
            <div class="itemrowgrid"><span >Nora</span><span >Hourigan</span></div>
            <div class="itemrowgrid"><span >Pancho</span><span >Wynn</span></div>
            <div class="itemrowgrid"><span >Magdaia</span><span >Walthall</span></div>
            <div class="itemrowgrid"><span >Thatch</span><span >Llorente</span></div>
            <div class="itemrowgrid"><span >Margaretta</span><span >Ramiro</span></div>
            <div class="itemrowgrid"><span >Jacques</span><span >Smallacombe</span></div>
            <div class="itemrowgrid"><span >Gamaliel</span><span >Learoyd</span></div>
            <div class="itemrowgrid"><span >Jyoti</span><span >Sholl</span></div>
            <div class="itemrowgrid"><span >Elbertine</span><span >Larwell</span></div>
            <div class="itemrowgrid"><span >Sebastian</span><span >Alvarado</span></div>
            <div class="itemrowgrid"><span >Mart</span><span >Hentzeler</span></div>
          </div>
        </div>
      </div>
    </div>

  </my-app>
</body>

</html>

最佳答案

我已经能够在本地重现该问题(至少)。正如您在下图中所看到的，在我的浏览器 (Chromium v​​92.0.4488.0) 中，仅重绘了列最右侧的区域 - 正是使用滚动条时将显示的区域。

另一方面，使用 Firefox (v88.0) 或 Safari (v14.0.3)，在 Flexbox 和网格示例中，除了输入之外的任何内容都不会被重新绘制。
由于您不使用容器高度的绝对值，我怀疑这是由于高度的计算以及是否需要显示滚动条而发生的。 Chrome 在这里的行为似乎与其他浏览器不同。
一个简单的解决方法似乎是为容器定义一个绝对高度(vh，虽然它是一个 relative unit ，但似乎也有效):

.panelleft,
.panelright {
  height: 100vh;
}

关于html - css 网格与 flexbox : why does css grid cause repaints and flexbox not，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67156643/

24 4 0
文章推荐： react-native - Metro bundler : Error: EISDIR: illegal operation on a directory, 读取
文章推荐： python-3.x - 季度迄今增长
文章推荐： javascript - jQuery 中同时过滤 "Radios + Select + Checkbox"的最快方法
文章推荐： python - 加速循环
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com