Erratic behaviour of display: table-cell height within absolute display:table (in Chrome only)

Question

I'm having some trouble with Chrome 61 and 59 (possibly other versions) behaving erratically.

The situation is as follows: in my flexbox layout, I have a section. This section contains a wrapper, which in turn contains an img and a textwrapper with a p element. The goal is to have the image cover the background, whilst the div covers the image and is click-through (pointer-events: none).

In order to center the text vertically, I use a display:table on the textwrapper and display:table-cell on the p. This works fine in all browsers I've tested it with (IE11, FF56), but in Chrome it displays incorrectly until a page resize event (either by opening the developer console or by resizing the window). Chrome appears to not respect the height of the table cell without a resize event.

To illustrate: before and after page resize (don't bother with the section alignment). The snippet below gives the exact same layout but with the expected behaviour, leaving me at a loss. I can also not find any inherited behaviour that may be the cause.

The page is a child template of the genesis framework for Wordpress (in case that helps anyone). The fact that I cannot easily replicate the issue is mildly annoying to say the least.

section {
  width: 400px;
  height: 267px;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.description {
  position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: rgba(11,60,93,0.6);
    color: #fff;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: table;
}

.text {
  vertical-align: middle;
    display: table-cell;
    text-align: center;
    font-size: 1.2em;
    height: 100%;
    padding: 20px 32px;
}

<section>
  <div class='wrapper'>
  <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Faust_bei_der_Arbeit.JPG/1920px-Faust_bei_der_Arbeit.JPG' class='image' width='400px'>
  <div class='description'>
    <p class='text'>
    Test
    </p>
  </div>
  </div>
</section>

possibly because you have `flex: 1` on the wrapper and table element not able to get the height... table elements are known to have issues when they come inside a flexbox... — kukkuz, Oct 24 '17 at 02:06

score 1 · Accepted Answer · answered Oct 24 '17 at 02:07

I checked your code snippet in Chrome and didn't see the problem you described.

Also, there was no difference in the rendering of the code snippet, as far as I could see, among Chrome, Firefox and Edge.

Putting all that aside, you said you need to vertically center text and are using this method:

In order to center the text vertically, I use a display: table on the textwrapper and display: table-cell on the p.

.description {
    display: table;
}

.text {
   vertical-align: middle;
   display: table-cell;
}

Instead of an old-school hack to accomplish vertical centering, try something clean and modern. Here's a flexbox alternative:

.description {
    display: flex;
    justify-content: center; /* horizontal alignment, in this case */
    align-items: center;     /* vertical alignment, in this case */
}

.text {  }

jsFiddle demo

More details: How to Center Elements Vertically and Horizontally in Flexbox

Hmm, that's what I get for using an old work-around... Either way, it doesn't help my question of why Chrome waits to define height before resizing, but it does solve the issue at hand. — Friso van Dijk, Oct 24 '17 at 15:15

Erratic behaviour of display: table-cell height within absolute display:table (in Chrome only)

1 Answers1

jsFiddle demo