CSS transform works on Firefox but not on Chrome

Question

I am trying a thing in CSS where the background of a text is an image and when we hover over the text, it scales to a very large number that the the image used as the font color shows up completely. It works perfectly on Mozilla Firefox, but the transform property of CSS seems to be broken on Chrome and the text just vanishes on hover on Chrome.

 /* font */ @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap'); /* reset */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rubik', sans-serif; } body, html { min-height: 100vh; width: 100vw; overflow-x: hidden; background: #999; } /* styling */.container { background: url("https://picsum.photos/900/800"); background-repeat: no-repeat; background-size: cover; color: transparent; -webkit-background-clip: text; background-clip: text; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; }.container.image-text { font-size: 5em; font-weight: normal; text-align: center; transition: transform 2s linear; }.container.image-text:hover { transform: scale(200); }

 <div class="container"> <div class="image-text"> Hover </div> </div>

Answer 1

The problem is that any sort of transform creates a new stacking context so the clip text isn't effective. [That is one of the things that the CSS property scale does for you - takes it away from being a transform - but it isn't supported by Chrome/Edge].

If we do away with a transform of scale and instead increase the font-size and transition on that you get what I think is the effect you want:

 /* font */ @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap'); /* reset */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rubik', sans-serif; } body, html { min-height: 100vh; width: 100vw; overflow-x: hidden; background: #999; } /* styling */.container { background: url("https://picsum.photos/900/800"); background-repeat: no-repeat; background-size: cover; color: transparent; -webkit-background-clip: text; background-clip: text; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; }.container.image-text { font-size: 5em; font-weight: normal; text-align: center; transition: font-size 2s linear; }.container.image-text:hover { font-size: 200em; }

 <div class="container"> <div class="image-text"> Hover </div> </div>

Answer 2

Looks like Chrome doesn't render it correctly. It does, when you use zoom , you just lose the transition then...

 @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap'); .container { font-family: 'Rubik', sans-serif; background: url("https://picsum.photos/900/800"); background-repeat: no-repeat; background-size: cover; color: transparent; -webkit-background-clip: text; background-clip: text; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; }.container.image-text { font-size: 5em; font-weight: normal; text-align: center; transition: transform 2s linear; }.container.image-text:hover { -moz-transform: scale(200); zoom: 200; }

 <div class="container"> <div class="image-text"> Hover </div> </div>