I wanted a smooth transition of “background: linear-gradient” color when scrolling(with transition and var).
It works fine in Chrome, but in Firefox the transition is instantaneous.
I have no idea what im doing wrong
My test code. On scroll(js script) change class for div from “item-static” to “item-sticky”.
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/style_test.css">
<script defer src="js/test.js"></script>
<title>Document</title>
</head>
<body>
<div class="target static-item"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente alias quod ullam.</div>
<div class="big-box" style="height: 120vh; background: black;"></div>
</body>
</html>
Css
@property --myColor1 {
syntax: '<color>';
initial-value: rgba(85, 85, 249, 1);
inherits: false;
}
@property --myColor2 {
syntax: '<color>';
initial-value: rgb(255, 255, 255);
inherits: false;
}
.target{
top:0;
}
.flex-container {
display: flex;
align-items: center;
justify-content: space-between;
top: 0;
z-index: 3;
background: white;
}
.sticky-item {
position: sticky;
--myColor1: rgb(255, 255, 255);
--myColor2: rgb(255, 255, 255);
transition: --myColor1 1s ease-in-out, --myColor2 1s ease-in-out;
background: linear-gradient(180deg, var(--myColor1) 0%, var(--myColor2) 100%);
}
.static-item {
position: static;
--myColor1: rgba(85, 85, 249, 1);
--myColor2: rgb(255, 255, 255);
transition: --myColor1 1s ease-in-out, --myColor2 1s ease-in-out;
background: linear-gradient(180deg, var(--myColor1) 0%, var(--myColor2) 100%);
}