0

My goal is to have text fade in and out of the page as you scroll, and I am using a gradient background clip to accomplish it. This works fine in Chrome, and it even works in Safari in codepen, but it isn't working on my live site.

Here's the code:

html, body{ background: pink; }
p{ margin: 0px; }

.clip{
  background: linear-gradient(transparent, black, transparent);  
   background-attachment: fixed;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-family: sans-serif;
  font-size: 65px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20vh;
}

Here's the codepen: https://codepen.io/wylliam-judd/pen/rNadBaX

And here's the live site: http://www.vrlu.com

One difference between the two is that the background clip is in a container on the live site. Here's the code there:

.summary-text {
  background: linear-gradient(transparent, black, transparent);
  background-attachment: fixed;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.medium-text {
  font-size: 22px;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 30px;
  width: 50%;
}

But if I move the css from .summary-text to .medium-text and try on localhost, it still doesn't work.

Wylliam Judd
  • 9,935
  • 2
  • 26
  • 36
  • Even stranger, if I highlight the text with my cursor, it becomes visible with the gradient fill it should have. – Wylliam Judd Jan 08 '20 at 19:35
  • it is not working so fine in codepen with FF, scrolling back up do not show the text unless window is resized. seems less buggy if background clipping is on the parent https://codepen.io/gc-nomade/pen/wvBmvBL . but not sure of what you expect. – G-Cyrillus Jan 08 '20 at 19:49
  • had a similar issue in the first snippet here: https://stackoverflow.com/a/59603613/8620333 ... when scrolling is invloved it becomes buggy – Temani Afif Jan 08 '20 at 20:19
  • @G-Cyr one browser at a time. Let's see if we can get it working in Safari. – Wylliam Judd Jan 08 '20 at 20:41
  • How's the codepen working in safari? How is it working with background clip one level higher? I wouldn't comment if i did not expect some feedback ;) . Good luck – G-Cyrillus Jan 08 '20 at 22:45
  • 1
    I managed somehow get it to work in Safari.. the (Play) icon got hidden.. the issue was `.parallax-content { transform: translateZ(0);}`, when I disabled that then it worked.. hope it helps you! VIDEO: https://gofile.io/?c=DgTQM4 – Lumi Jan 08 '20 at 23:33
  • Well, shoot, I got really excited about that working, but it didn't work for me. The fade-out effect doesn't happen until the pink section. Looks like you added the css to the top section. The weird thing is that it works if I like, highlight the text, or make changes to the css after the page is open, but the text comes up as transparent otherwise (without the clip coming through). I deployed a fix that removes the fade in/out altogether, so unfortunately it's going to be that much harder to help me now. Maybe I'll write the shortest code-snippet I can come up with that doesn't work. – Wylliam Judd Jan 09 '20 at 00:54

0 Answers0