2

I'm trying to use grids but found this weird behaviour in chrome. Check out this fiddle, try changing the height of the view port https://jsfiddle.net/16Ltw04d/4/

html, body {
  height: 100%;
}

.grid {
  outline: 1px solid red;
  height: 100%;
  display: grid;
  grid-template-areas: 'main';
  grid-template-rows: 1fr;
}

.main {
  outline: 1px solid green;
  grid-area: main;
  margin: auto;
  min-width: 200px;
  min-height: 200px;
}

If you resize the window height then the inner div will jump up and down rapidly as it is redrawn in different locations. It works fine in firefox. Am I doing something incorrect or is this a bug with chrome?

Wilson
  • 71
  • 1
  • 5
  • 2
    Probably because of the `margin: auto` declaration, which forces the engine to do multiple passes when laying the element out. If you use `justify-content: center; align-items: center` on the grid instead and then remove `margin:auto` from `.main`, the layout flickering will be resolved. – Terry Mar 04 '19 at 19:43
  • 2
    @Terry chrome seems to have a serious issue with margin, another one yesterday also fixed by removing margin: https://stackoverflow.com/q/54970286/8620333 – Temani Afif Mar 04 '19 at 19:51
  • @Terry Thanks, I started using `margin:auto` because 1 tag seemed better than 2 for the same task. This has to be a bug in chrome though, right? It seems the order at which something is processed is influencing the final position. It would be nice to be able to use `margin: auto` and have it work on all browsers. – Wilson Mar 04 '19 at 19:53
  • 1
    It appears to be a problem with both Blink and WebKit: can reproduce the same problem with Safari. – Terry Mar 04 '19 at 19:55
  • @Terry also a problem with `justify-content` and `align-items` is that it affects every other element in the grid. In this example I only had 1 but most of the time you will have more than that and you may not want them all centred. – Wilson Mar 04 '19 at 20:12
  • 1
    As an alternative, you could use `justify-self` and `align-self` on the `.main` element. – araraonline Mar 04 '19 at 21:34
  • 1
    @araraonline thanks, that seems to work great! – Wilson Mar 04 '19 at 22:58

0 Answers0