Search code examples
cssvertical-alignment

-webkit-background-clip: text and vertically centred text

I'm looking to vertically centre an element inside of a full-page element with a background image, that contains background-clipped text. Using -webkit-background-clip: text and the corresponding IE fallback works just fine for the clipping, but each and every time I try to centre the box using display: inline-block or position: absolute the text immediately disappears.

body {
  margin: 1rem;
}

.box {
  height: calc(100vh - 2rem);
  border: 1px solid;
  background-image: url(http://lorempixel.com/1280/720/);
  -webkit-background-clip: text;
}

.align {
  /* to right-align the text box */
  text-align: right;
  
  /* uncomment below to see the issue */
  /* display: inline-block; */
}

.title {
  /* Duplicated here for Safari */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: yellow;
  
  margin: 0;
  font: bold 6rem/1 sans-serif;
  text-transform: uppercase;
  text-align: center;
}
<article class="box">
  <div class="align">
    <h1 class="title">The Title</h1>
</article>

I've created a Codepen with an example. If you uncomment display: inline-block on the .align class or attempt to vertically centre it with position: absolute and transform for example, the text disappears.

I'm sure I'm missing something simple, any suggestions are greatly appreciated!

Solution

  • It looks like this was indeed a known issue, and was resolved in Chrome 63!