CSS position absolute and height 100% issue on Chrome

Question

I have an issue with a container on 100% height not working on Chrome. In short, it's a caption from an image which is appearing over the image while hovering it.

.item {
  position: relative;
}

.caption {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  display: table;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border-radius: 4px;
  opacity: 0;
  transition: 0.2s;
}

a:hover .caption {
  opacity: 1;
  transition: 0.2s;
}

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

.item img {
  width: 100%;
}

<div class="item">
  <a href="#blabla">
    <img src="//i.stack.imgur.com/tiQ1S.jpg">
    <div class="caption">
      <span class="caption-inter">caption of the image</span>
    </div>
  </a>
</div>

It works on Firefox, IE, but for Chrome, the caption with background only appear at the top of the image.

Any idea how I could make it work in Chrome?

try setting the width of the img to 100% of the container div `.item img { width: 100%; }` — M0ns1f, Jan 20 '18 at 16:52

Stickers · Accepted Answer · 2018-01-20T22:11:27.433

Looks like Chrome doesn't apply the height:100% when position:absolute and display:table is also being set at the same time, and of course there is also position:relative set on the wrapper.

I would suggest to use flexbox for the caption for easy centering, and use the HTML5 semantic <figure> + <figcaption> elements for the markup.

.caption {
  ...
  display: flex;
  justify-content: center;
  align-items: center;
}

Follow this post to find more ways of centering for both horizontally and vertically.

Snippet

.figure {
  position: relative;
  display: inline-block;  /*NEW*/
  margin: 0;              /*NEW*/
}

.image {
  border-radius: 4px;
  width: 100%;
  height: auto;
  display: block;
}

.caption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  box-sizing: border-box;
  border-radius: 4px;
  opacity: 0;
  transition: 0.2s;
  display: flex;            /*NEW*/
  justify-content: center;  /*NEW*/
  align-items: center;      /*NEW*/
}

a:hover .caption {
  opacity: 1;
}

<a class="item" href="#">
  <figure class="figure">
    <img class="image" src="//i.stack.imgur.com/tiQ1S.jpg">
    <figcaption class="caption">
      caption of the image
    </figcaption>
  </figure>
</a>

It does work ! I'm not very familiar with flexbox, but it works fine on IE. I'll try to understand it, thanks a lot ! — Gawet, Jan 20 '18 at 17:19
beware that flexbox is not well suppoerted in all IE versions. — Nir Ben-Yair, Jan 20 '18 at 17:21

Nir Ben-Yair · Answer 2 · 2018-01-20T17:01:14.763

It's sometimes needed to give the container element, that's wrapping an absolute element, position: relative, to wrap the absolute element as expected.

Besides that, you should change the caption to display: block so it can actulaly apply the width: 100%.

/* added this */

#blabla {
  /* its important to give the container position: relative,
      when it's wrapping an absolute element */
  position: relative;

  /* It's needed to give the anchor tag "inline-block" attribute so it 
     can receive width and height, since it's an inline element */

  display: inline-block;
}

.caption {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);

  /* changed from table to block */
  display: block;

  top: 0;
  left: 0;
  box-sizing: border-box;
  border-radius: 4px;
  opacity: 0;
  transition: 0.2s;
}

a:hover .caption {
  opacity: 1;
  transition: 0.2s;
}

.caption .caption-inter {
  display: table-cell;
  vertical-align: middle;
  text-overflow: ellipsis;
}

Hi Nir, it kinda works, but the display:table was for centering the text vertically. Do you have a solution to do so ? — Gawet, Jan 20 '18 at 17:10
@Gawet take a look at this: https://codepen.io/NirBenya/pen/dJaWWw I used absolute positioning for the text. you can also use flexbox. — Nir Ben-Yair, Jan 20 '18 at 17:15

CSS position absolute and height 100% issue on Chrome

2 Answers2