I want to create an effect, where an element on a scrollable page has a gradient background that changes with its scroll position, so the gradient always stays the same and the child elements are kind of like a "window" to said gradient.
I have successfully created such an effect (see JSFiddle below) by using a SVG image with a gradient fill as a background-image and background-attachment: fixed, but the resulting scrolling performance is pretty terrible, especially in Chromium browsers. Looking at the performance profiler in DevTools reveals the Paint segment of each frame takes more than four times longer to complete compared to when the effect is disabled.
Now my question: Is there any way to achieve the same result while being a lot less resource-intensive?
#parent {
display: flex;
flex-wrap: wrap;
width: 648px;
}
.child {
display: grid;
grid-template-rows: auto max-content;
grid-template-columns: auto max-content max-content;
grid-template-areas: 'a a a' 'b c d';
width: 200px;
height: 80px;
margin: 8px;
box-sizing: border-box;
padding: 8px;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LmF7b3BhY2l0eTowLjA1fS5ie2ZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6ODtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLW1pdGVybGltaXQ6MTB9PC9zdHlsZT48ZyBjbGFzcz0iYSI+PGxpbmUgY2xhc3M9ImIiIHgxPSIzMiIgeTE9IjAiIHgyPSIwIiB5Mj0iMzIiLz48bGluZSBjbGFzcz0iYiIgeDE9IjMyIiB5MT0iMzIiIHgyPSIwIiB5Mj0iNjQiLz48bGluZSBjbGFzcz0iYiIgeDE9IjMyIiB5MT0iLTMyIiB4Mj0iMCIgeTI9IjAiLz48L2c+PC9zdmc+"), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiBncmFkaWVudFRyYW5zZm9ybT0icm90YXRlKDkwKSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjODBjMGZmIiAvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2ZmYzA4MCIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNhKSIvPjwvc3ZnPg==");
background-size: 32px, 100% 100%;
background-attachment: fixed, fixed;
background-repeat: repeat, repeat-x;
background-position: 0 0, 0 0;
}
.sub-child-1,
.sub-child-2 {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 24px;
background-color: #0c0;
}
.child>span { grid-area: a; }
.sub-child-1 { grid-area: c; }
.sub-child-2 { grid-area: d; }<div id="parent">
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
</div>You can try to use a position:fixed element instead
#parent {
display: flex;
flex-wrap: wrap;
width: 648px;
}
.child {
display: grid;
grid-template-rows: auto max-content;
grid-template-columns: auto max-content max-content;
grid-template-areas: 'a a a' 'b c d';
width: 200px;
height: 80px;
margin: 8px;
box-sizing: border-box;
padding: 8px;
clip-path:inset(0); /* clip the pseudo element to only its parent */
}
.child::before {
content:"";
position:fixed;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LmF7b3BhY2l0eTowLjA1fS5ie2ZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6ODtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLW1pdGVybGltaXQ6MTB9PC9zdHlsZT48ZyBjbGFzcz0iYSI+PGxpbmUgY2xhc3M9ImIiIHgxPSIzMiIgeTE9IjAiIHgyPSIwIiB5Mj0iMzIiLz48bGluZSBjbGFzcz0iYiIgeDE9IjMyIiB5MT0iMzIiIHgyPSIwIiB5Mj0iNjQiLz48bGluZSBjbGFzcz0iYiIgeDE9IjMyIiB5MT0iLTMyIiB4Mj0iMCIgeTI9IjAiLz48L2c+PC9zdmc+"), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiBncmFkaWVudFRyYW5zZm9ybT0icm90YXRlKDkwKSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjODBjMGZmIiAvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2ZmYzA4MCIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNhKSIvPjwvc3ZnPg==");
background-size: 32px, 100% 100%;
background-repeat: repeat, repeat-x;
}
.sub-child-1,
.sub-child-2 {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 24px;
background-color: #0c0;
}
.child>span { grid-area: a; }
.sub-child-1 { grid-area: c; }
.sub-child-2 { grid-area: d; }<div id="parent">
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
<div class="child">
<span>Lorem ipsum</span>
<div class="sub-child-1"></div>
<div class="sub-child-2"></div>
</div>
</div>