[bug] - [blur fade]: Firefox: `BlurFade` blur animation skipped on rotated/skewed elements unless `transition.filter` is specified

[Fefedu973]

Describe the bug
BlurFade’s blur/opacity entrance animation does not play on Firefox when the animated element is inside a rotated/skewed container (a “tilted” hero image). Instead of animating from blurred → sharp, the element appears instantly (no blur transition). The same code works as expected on Chrome.
Adding a property-specific transition for filter fixes the issue on Firefox.

To Reproduce

1. Render a rotated hero mockup wrapped in BlurFade (see minimal usage below).
2. Open the page in Firefox.
3. Observe the hero: it appears instantly without the blur fade animation.
4. Add a property-specific transition for filter inside BlurFade’s motion.div and reload → animation works.

Minimal usage (where the bug shows)

<BlurFade
  delay={2.0}
  duration={1.0}
  offset={20}
  direction="down"
  className="relative w-screen max-w-[90vw] overflow-visible pt-8"
>
  <div className="flex justify-center">
    <div
      className="
        ml-0 sm:ml-[-8vw] lg:ml-[-10vw]
        w-full sm:w-[145vw] lg:w-[160vw] max-w-[2200px]
        origin-top transform-gpu will-change-transform
        rotate-0 sm:rotate-[-20deg] lg:rotate-[-22deg]
        skew-y-0 sm:skew-y-12
        pointer-events-none select-none
      "
      aria-hidden="true"
    >
      {/* images ... all have loading="lazy" */}
    </div>
  </div>
</BlurFade>

Component code (relevant part)
Default (buggy on Firefox):

<motion.div
  /* ... */
  transition={{
    delay: 0.04 + delay,
    duration,
    ease: "easeOut",
    // no property-specific transition for 'filter' here
  }}
>

Workaround (fixes Firefox):

<motion.div
  /* ... */
  transition={{
    delay: 0.04 + delay,
    duration,
    ease: "easeOut",
    filter: { duration: duration * 1 }, // also tested with *0.8
  }}
>

Expected behavior
The blur/opacity entrance should animate smoothly on Firefox exactly like on Chrome, without requiring a property-specific filter transition override. Or at least implement this fix temporarly in the component if no better option.

Screenshots / video
I lost them, ask me if necessary

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Firefox
• Version: 142.0 (64-bit)
• Hardware acceleration: Enabled
• privacy.resistFingerprinting: false
• Chrome (latest stable at time of testing): works as expected

Additional context

• Only reproduces for the “tilted” hero block that’s rotated/skewed (rotate-[-20deg], skew-y-12). Buttons and other non-rotated elements using BlurFade animate correctly in Firefox.
• All hero images use loading="lazy" and decoding="async".
• Suspected interaction: Firefox optimization path for transformed elements + filter animation.
• Proposed fix in library: when variants include a filter change (e.g., blur(6px) → blur(0px)), set a default property-specific transition for filter (e.g., filter: { duration }) to ensure consistent behavior across browsers. Optionally document this requirement.

Where this is used (full example component)

• Headline usage (Next.js): includes the rotated container and BlurFade wrappers.
• BlurFade component versions tested: import from motion/react; useInView with once: true.

If helpful, I can open a PR that adds the default filter transition when filter is present in the variants (or update the docs with a Firefox note).