css grid vs flexbox : why does css grid cause repaints and flexbox not

Question

I like very much css grid because of its simplicity. But there seems to be a performance issue with css grid that flexbox does not have.

I have implemented a two column full screen page both columns having a form with input box and a list of items with overflow-y:auto. One example where the left and right panel are implemented using flexbox and one where left and right panel are implemented with css grid.

this is the flexbox version : https://web-platform-wtfgmj.stackblitz.io/

and this is the css grid version : https://web-platform-wtfgmj.stackblitz.io/index2.html

Open the developper tools in chrome and enable paint flashing (tools/rendering has to be enabled). When typing in one of the input boxes, the css grid version will repaint all items in the list. The flexbox version does not have this problem.

I would like to understand why css grid repaints all items in the list when typing in the input box ? And can it somehow be avoided ?

Update : Seems to be problem with stackblitz... included as code snippets

Update 2: because it's little bit burried in comments: So I filed a bug report with chrome (bugs.chromium.org/p/chromium/issues/detail?id=1204446, upon suggestion of dgrogan) and they seem to confirm that it is a performance issue with chrome's current grid implementation. Apparently they are busy with a new implementation LayoutNGGrid which would solve the issue

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;
}



  


  
    
      
        
          Search:
        
        
          
          
            JoelynnHitzmann
            FarrisEspine
            LinnetNare
            HeidieCoolican
            UlrikeLowndsborough
            ClaudineCaneo
            JanellaThurborn
            MenardWolledge
            AlasteirAnnandale
            IsabelitaByrom
            JimIssard
            MicTiddeman
            CarceMcClunaghan
            ArchibaldoJacqueme
            SybillaVivyan
            HerveLund
            WadeCalway
            IritaNewvell
            LucieHurrion
            SherieBapty
            EstellaLettington
            LionGanforthe
            SiouxieJanuary 1st
            ClayKnightsbridge
            ShirDesesquelle
            MagdaBrew
            DidiScanlon
            PetrClerk
            FrazierHarler
            DeonneScoffham
            MeggiKlampk
            DarbyHuey
            BernaBatram
            AshliDucarel
            MarilinGothup
            MariyaFettis
            AnettStookes
            AdellaWash
            RickyPellamonuten
            NoraHourigan
            PanchoWynn
            MagdaiaWalthall
            ThatchLlorente
            MargarettaRamiro
            JacquesSmallacombe
            GamalielLearoyd
            JyotiSholl
            ElbertineLarwell
            SebastianAlvarado
            MartHentzeler
          
        
      
      
        
          Search:
        
        
          
          
            JoelynnHitzmann
            FarrisEspine
            LinnetNare
            HeidieCoolican
            UlrikeLowndsborough
            ClaudineCaneo
            JanellaThurborn
            MenardWolledge
            AlasteirAnnandale
            IsabelitaByrom
            JimIssard
            MicTiddeman
            CarceMcClunaghan
            ArchibaldoJacqueme
            SybillaVivyan
            HerveLund
            WadeCalway
            IritaNewvell
            LucieHurrion
            SherieBapty
            EstellaLettington
            LionGanforthe
            SiouxieJanuary 1st
            ClayKnightsbridge
            ShirDesesquelle
            MagdaBrew
            DidiScanlon
            PetrClerk
            FrazierHarler
            DeonneScoffham
            MeggiKlampk
            DarbyHuey
            BernaBatram
            AshliDucarel
            MarilinGothup
            MariyaFettis
            AnettStookes
            AdellaWash
            RickyPellamonuten
            NoraHourigan
            PanchoWynn
            MagdaiaWalthall
            ThatchLlorente
            MargarettaRamiro
            JacquesSmallacombe
            GamalielLearoyd
            JyotiSholl
            ElbertineLarwell
            SebastianAlvarado
            MartHentzeler

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%;
}



  
  
  


  
    
      
        
          Search:
        
        
          
          
            JoelynnHitzmann
            FarrisEspine
            LinnetNare
            HeidieCoolican
            UlrikeLowndsborough
            ClaudineCaneo
            JanellaThurborn
            MenardWolledge
            AlasteirAnnandale
            IsabelitaByrom
            JimIssard
            MicTiddeman
            CarceMcClunaghan
            ArchibaldoJacqueme
            SybillaVivyan
            HerveLund
            WadeCalway
            IritaNewvell
            LucieHurrion
            SherieBapty
            EstellaLettington
            LionGanforthe
            SiouxieJanuary 1st
            ClayKnightsbridge
            ShirDesesquelle
            MagdaBrew
            DidiScanlon
            PetrClerk
            FrazierHarler
            DeonneScoffham
            MeggiKlampk
            DarbyHuey
            BernaBatram
            AshliDucarel
            MarilinGothup
            MariyaFettis
            AnettStookes
            AdellaWash
            RickyPellamonuten
            NoraHourigan
            PanchoWynn
            MagdaiaWalthall
            ThatchLlorente
            MargarettaRamiro
            JacquesSmallacombe
            GamalielLearoyd
            JyotiSholl
            ElbertineLarwell
            SebastianAlvarado
            MartHentzeler
          
        
      
      
        
          Search:
        
        
          
          
            JoelynnHitzmann
            FarrisEspine
            LinnetNare
            HeidieCoolican
            UlrikeLowndsborough
            ClaudineCaneo
            JanellaThurborn
            MenardWolledge
            AlasteirAnnandale
            IsabelitaByrom
            JimIssard
            MicTiddeman
            CarceMcClunaghan
            ArchibaldoJacqueme
            SybillaVivyan
            HerveLund
            WadeCalway
            IritaNewvell
            LucieHurrion
            SherieBapty
            EstellaLettington
            LionGanforthe
            SiouxieJanuary 1st
            ClayKnightsbridge
            ShirDesesquelle
            MagdaBrew
            DidiScanlon
            PetrClerk
            FrazierHarler
            DeonneScoffham
            MeggiKlampk
            DarbyHuey
            BernaBatram
            AshliDucarel
            MarilinGothup
            MariyaFettis
            AnettStookes
            AdellaWash
            RickyPellamonuten
            NoraHourigan
            PanchoWynn
            MagdaiaWalthall
            ThatchLlorente
            MargarettaRamiro
            JacquesSmallacombe
            GamalielLearoyd
            JyotiSholl
            ElbertineLarwell
            SebastianAlvarado
            MartHentzeler

user_5818622 · Answer

I've been able to reproduce the problem locally (almost at least). As you can see in the following image, in my browser (Chromium v92.0.4488.0) only an area on the far right of the column is repainted - exactly the area where the scrollbar will be displayed when it is used.

Using Firefox (v88.0) or Safari (v14.0.3), on the other hand, neither in the Flexbox nor the grid example anything other than the input is being repainted.

Since you don't use absolute values for the height of the containers, I suspect it happens due to the calculation of the height and whether the scrollbar needs to be displayed. Chrome seems to behave differently here than other browsers.

A simple fix seems to be to define an absolute height for the containers (vh, although it's a relative unit, seems to work too):

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

css grid vs flexbox : why does css grid cause repaints and flexbox not

1 Answers