Html Question posted in
Some basic documentation can be found here.

Html – css transition for var inside "background: linear-gradient" not working in firefox but working in chrome

I wanted a smooth transition of background: linear-gradient color when scrolling. It works fine in Chrome, but in Firefox the transition is instantaneous. I have no idea what im doing wrong

On scroll, change class for the div from item-static to item-sticky.

// Initial state
const target = document.getElementsByClassName("target");
const w_width = 651;
var scrollPos = 0;
changeTargetClass();
checkWindowSize();

window.addEventListener('resize', checkWindowSize);

function checkWindowSize() {
  if (window.innerWidth > w_width) {
    // adding scroll event
    window.addEventListener('scroll', changeTargetClass);
  } else {
    window.removeEventListener('scroll', changeTargetClass);
    target[0].classList.add('static-item')
  }
}

function changeTargetClass() {
  scrollPos = (document.body.getBoundingClientRect()).top;
  setupTarget()
}

function setupTarget() {
  if (scrollPos >= 0) {
    target[0].classList.add('static-item')
    target[0].classList.remove('sticky-item')
  } else {
    target[0].classList.remove('static-item')
    target[0].classList.add('sticky-item')
  }
}
@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%);
}
<div class="target static-item"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente alias quod ullam non</div>
<div class="big-box" style="height: 120vh; background: black;"></div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    kinda resolved my question reading this thread

    and demo https://codepen.io/fentress8975/pen/LYagxmX

    .target {
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(85, 85, 249, 1) 0%, rgb(255, 255, 255) 100%);
    background-size: 100%;
    background-repeat: no-repeat;
}

.flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: aqua;
}

.sticky-item {
    position: sticky;
    transition: background 3s ease-out;
    background-position-y: -100px;
}

.static-item {
    position: static;
    transition: background 0.6s linear;
}

  2. 0

    The issue you’re encountering with Firefox likely stems from its handling of CSS custom properties (–myColor1 and –myColor2) within the transition property.

    It seems like Firefox might not fully support transitions of custom properties like you defined it.

    Instead of transitioning the custom properties directly, you can transition the opacity of the .target element, which indirectly transitions the colors defined by the custom properties. This approach tends to be more widely supported across browsers.

        <style>
  .target {
    transition: opacity 1s ease-in-out; /* Add opacity transition */
  }
  
  .sticky-item {
    opacity: 1; /* Ensure element is visible when sticky */
  }

  .static-item {
    opacity: 0; /* Hide element when static */
  }
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search