[BUG]: components/glass-surface

[avoe-git]

Describe the issue

Component glass surface not works in Firefox based browsers (Firefox itself, Zen Browser, Tor), I tried it in Chrome and only there it worked. I don't know it counts as "working", but I don't think it's the desired result.

Reproduction Link

No response

Steps to reproduce

In Firefox:

In Chrome:

EDIT:
Windows 11 25H2
Firefox 145.0.1

Validations

• I have checked other issues to see if my issue was already reported or addressed

[DavidHDev]

Yes, this is a known issue, nothing I can do about it for now I think.

[freakdaniel]

@avoe-git displacement svg map in gecko-like browsers do not work properly. Because of this use flat glass. Ready-surface for JS + Tailwind:

import { useEffect, useRef, useState, useId } from 'react';

const useDarkMode = () => {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    if (typeof window === 'undefined') return;

    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    setIsDark(mediaQuery.matches);

    const handler = e => setIsDark(e.matches);
    mediaQuery.addEventListener('change', handler);
    return () => mediaQuery.removeEventListener('change', handler);
  }, []);

  return isDark;
};

const GlassSurface = ({
  children,
  width = null,
  height = null,
  borderRadius = 20,
  borderWidth = 0.07,
  brightness = 50,
  opacity = 0.93,
  blur = 11,
  displace = 0,
  backgroundOpacity = 0,
  saturation = 1,
  distortionScale = -180,
  redOffset = 0,
  greenOffset = 10,
  blueOffset = 20,
  xChannel = 'R',
  yChannel = 'G',
  mixBlendMode = 'difference',
  className = '',
  style = {},
  flat = false
}) => {
  const uniqueId = useId().replace(/:/g, '-');
  const filterId = `glass-filter-${uniqueId}`;
  const redGradId = `red-grad-${uniqueId}`;
  const blueGradId = `blue-grad-${uniqueId}`;

  const containerRef = useRef(null);
  const svgRef = useRef(null);

  const isDarkMode = useDarkMode();

  useEffect(() => {
    if (flat) return;

    const generateDisplacementMap = () => {
      const rect = containerRef.current?.getBoundingClientRect();
      const actualWidth = rect?.width || 400;
      const actualHeight = rect?.height || 200;
      const edgeSize = Math.min(actualWidth, actualHeight) * (borderWidth * 0.5);

      const svgContent = `
        <svg viewBox="0 0 ${actualWidth} ${actualHeight}" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <linearGradient id="${redGradId}" x1="100%" y1="0%" x2="0%" y2="0%">
              <stop offset="0%" stop-color="#0000"/>
              <stop offset="100%" stop-color="red"/>
            </linearGradient>
            <linearGradient id="${blueGradId}" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stop-color="#0000"/>
              <stop offset="100%" stop-color="blue"/>
            </linearGradient>
          </defs>
          <rect x="0" y="0" width="${actualWidth}" height="${actualHeight}" fill="black"></rect>
          <rect x="0" y="0" width="${actualWidth}" height="${actualHeight}" rx="${borderRadius}" fill="url(#${redGradId})" />
          <rect x="0" y="0" width="${actualWidth}" height="${actualHeight}" rx="${borderRadius}" fill="url(#${blueGradId})" style="mix-blend-mode: ${mixBlendMode}" />
          <rect x="${edgeSize}" y="${edgeSize}" width="${actualWidth - edgeSize * 2}" height="${actualHeight - edgeSize * 2}" rx="${borderRadius}" fill="hsl(0 0% ${brightness}% / ${opacity})" style="filter:blur(${blur}px)" />
        </svg>
      `;

      return `data:image/svg+xml,${encodeURIComponent(svgContent)}`;
    };

    const updateDisplacementMap = () => {
      const feImageElement = svgRef.current?.querySelector('feImage');
      const redChannelElement = svgRef.current?.querySelector('#redchannel');
      const greenChannelElement = svgRef.current?.querySelector('#greenchannel');
      const blueChannelElement = svgRef.current?.querySelector('#bluechannel');
      const gaussianBlurElement = svgRef.current?.querySelector('feGaussianBlur');

      if (feImageElement) {
        feImageElement.setAttribute('href', generateDisplacementMap());
      }
      if (redChannelElement) {
        redChannelElement.setAttribute('scale', (distortionScale + redOffset).toString());
        redChannelElement.setAttribute('xChannelSelector', xChannel);
        redChannelElement.setAttribute('yChannelSelector', yChannel);
      }
      if (greenChannelElement) {
        greenChannelElement.setAttribute('scale', (distortionScale + greenOffset).toString());
        greenChannelElement.setAttribute('xChannelSelector', xChannel);
        greenChannelElement.setAttribute('yChannelSelector', yChannel);
      }
      if (blueChannelElement) {
        blueChannelElement.setAttribute('scale', (distortionScale + blueOffset).toString());
        blueChannelElement.setAttribute('xChannelSelector', xChannel);
        blueChannelElement.setAttribute('yChannelSelector', yChannel);
      }
      if (gaussianBlurElement) {
        gaussianBlurElement.setAttribute('stdDeviation', displace.toString());
      }
    };

    updateDisplacementMap();

  }, [
    flat,
    width, height, borderRadius, borderWidth, brightness, opacity, blur, displace,
    distortionScale, redOffset, greenOffset, blueOffset, xChannel, yChannel,
    mixBlendMode, redGradId, blueGradId
  ]);

  useEffect(() => {
    if (flat || !containerRef.current) return;

    const resizeObserver = new ResizeObserver(() => {
      setTimeout(() => {
        const generateDisplacementMap = () => {
          const rect = containerRef.current?.getBoundingClientRect();
          const actualWidth = rect?.width || 400;
          const actualHeight = rect?.height || 200;
          const edgeSize = Math.min(actualWidth, actualHeight) * (borderWidth * 0.5);

          const svgContent = `
            <svg viewBox="0 0 ${actualWidth} ${actualHeight}" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <linearGradient id="${redGradId}" x1="100%" y1="0%" x2="0%" y2="0%">
                  <stop offset="0%" stop-color="#0000"/>
                  <stop offset="100%" stop-color="red"/>
                </linearGradient>
                <linearGradient id="${blueGradId}" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stop-color="#0000"/>
                  <stop offset="100%" stop-color="blue"/>
                </linearGradient>
              </defs>
              <rect x="0" y="0" width="${actualWidth}" height="${actualHeight}" fill="black"></rect>
              <rect x="0" y="0" width="${actualWidth}" height="${actualHeight}" rx="${borderRadius}" fill="url(#${redGradId})" />
              <rect x="0" y="0" width="${actualWidth}" height="${actualHeight}" rx="${borderRadius}" fill="url(#${blueGradId})" style="mix-blend-mode: ${mixBlendMode}" />
              <rect x="${edgeSize}" y="${edgeSize}" width="${actualWidth - edgeSize * 2}" height="${actualHeight - edgeSize * 2}" rx="${borderRadius}" fill="hsl(0 0% ${brightness}% / ${opacity})" style="filter:blur(${blur}px)" />
            </svg>
          `;
          return `data:image/svg+xml,${encodeURIComponent(svgContent)}`;
        };

        const updateDisplacementMap = () => {
          const feImageElement = svgRef.current?.querySelector('feImage');
          if (feImageElement) {
            feImageElement.setAttribute('href', generateDisplacementMap());
          }
        };

        updateDisplacementMap();
      }, 0);
    });

    resizeObserver.observe(containerRef.current);
    return () => resizeObserver.disconnect();

  }, [flat, borderRadius, borderWidth, brightness, opacity, blur, mixBlendMode, redGradId, blueGradId]);


  const supportsSVGFilters = () => {
    const isWebkit = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
    const isFirefox = /Firefox/.test(navigator.userAgent);

    if (isWebkit || isFirefox) {
      return false;
    }

    const div = document.createElement('div');
    div.style.backdropFilter = `url(#${filterId})`;
    return div.style.backdropFilter !== '';
  };

  const supportsBackdropFilter = () => {
    if (typeof window === 'undefined') return false;
    return CSS.supports('backdrop-filter', 'blur(10px)');
  };

  const getContainerStyles = () => {
    const baseStyles = {
      ...style,
      ...(typeof width === 'number' ? { width: `${width}px` } : {}),
      ...(typeof height === 'number' ? { height: `${height}px` } : {}),
      borderRadius: `${borderRadius}px`,
      '--glass-frost': backgroundOpacity,
      '--glass-saturation': saturation
    };

    const svgSupported = supportsSVGFilters();
    const backdropFilterSupported = supportsBackdropFilter();

    if (svgSupported && !flat) {
      return {
        ...baseStyles,
        background: isDarkMode ? `hsl(0 0% 0% / ${backgroundOpacity})` : `hsl(0 0% 100% / ${backgroundOpacity})`,
        backdropFilter: `url(#${filterId}) saturate(${saturation})`,
        boxShadow: isDarkMode
          ? `0 0 2px 1px color-mix(in oklch, white, transparent 65%) inset,
             0 0 10px 4px color-mix(in oklch, white, transparent 85%) inset,
             0px 4px 16px rgba(17, 17, 26, 0.05),
             0px 8px 24px rgba(17, 17, 26, 0.05),
             0px 16px 56px rgba(17, 17, 26, 0.05),
             0px 4px 16px rgba(17, 17, 26, 0.05) inset,
             0px 8px 24px rgba(17, 17, 26, 0.05) inset,
             0px 16px 56px rgba(17, 17, 26, 0.05) inset`
          : `0 0 2px 1px color-mix(in oklch, black, transparent 85%) inset,
             0 0 10px 4px color-mix(in oklch, black, transparent 90%) inset,
             0px 4px 16px rgba(17, 17, 26, 0.05),
             0px 8px 24px rgba(17, 17, 26, 0.05),
             0px 16px 56px rgba(17, 17, 26, 0.05),
             0px 4px 16px rgba(17, 17, 26, 0.05) inset,
             0px 8px 24px rgba(17, 17, 26, 0.05) inset,
             0px 16px 56px rgba(17, 17, 26, 0.05) inset`
      };
    } else {
      if (isDarkMode) {
        if (!backdropFilterSupported) {
          return {
            ...baseStyles,
            background: 'rgba(0, 0, 0, 0.4)',
            border: '1px solid rgba(255, 255, 255, 0.2)',
            boxShadow: `inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
                        inset 0 -1px 0 0 rgba(255, 255, 255, 0.1)`
          };
        } else {
          return {
            ...baseStyles,
            background: 'rgba(255, 255, 255, 0.1)',
            backdropFilter: 'blur(12px) saturate(1.8) brightness(1.2)',
            WebkitBackdropFilter: 'blur(12px) saturate(1.8) brightness(1.2)',
            border: '1px solid rgba(255, 255, 255, 0.2)',
            boxShadow: `inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
                        inset 0 -1px 0 0 rgba(255, 255, 255, 0.1)`
          };
        }
      } else {
        if (!backdropFilterSupported) {
          return {
            ...baseStyles,
            background: 'rgba(255, 255, 255, 0.4)',
            border: '1px solid rgba(255, 255, 255, 0.3)',
            boxShadow: `inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
                        inset 0 -1px 0 0 rgba(255, 255, 255, 0.3)`
          };
        } else {
          return {
            ...baseStyles,
            background: 'rgba(255, 255, 255, 0.25)',
            backdropFilter: 'blur(12px) saturate(1.8) brightness(1.1)',
            WebkitBackdropFilter: 'blur(12px) saturate(1.8) brightness(1.1)',
            border: '1px solid rgba(255, 255, 255, 0.3)',
            boxShadow: `0 8px 32px 0 rgba(31, 38, 135, 0.2),
                        0 2px 16px 0 rgba(31, 38, 135, 0.1),
                        inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
                        inset 0 -1px 0 0 rgba(255, 255, 255, 0.2)`
          };
        }
      }
    }
  };

  const glassSurfaceClasses =
    'relative flex items-center justify-center overflow-hidden transition-opacity duration-[260ms] ease-out';

  const focusVisibleClasses = isDarkMode
    ? 'focus-visible:outline-2 focus-visible:outline-[#0A84FF] focus-visible:outline-offset-2'
    : 'focus-visible:outline-2 focus-visible:outline-[#007AFF] focus-visible:outline-offset-2';

  return (
    <div
      ref={containerRef}
      className={`${glassSurfaceClasses} ${focusVisibleClasses} ${className}`}
      style={getContainerStyles()}
    >
      {!flat && (
        <svg
          ref={svgRef}
          className="w-full h-full pointer-events-none absolute inset-0 opacity-0 -z-10"
          xmlns="http://www.w3.org/2000/svg"
        >
          <defs>
            <filter id={filterId} colorInterpolationFilters="sRGB" x="0%" y="0%" width="100%" height="100%">
              <feImage x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="map" />

              <feDisplacementMap in="SourceGraphic" in2="map" id="redchannel" result="dispRed" />
              <feColorMatrix
                in="dispRed"
                type="matrix"
                values="1 0 0 0 0
                      0 0 0 0 0
                      0 0 0 0 0
                      0 0 0 1 0"
                result="red"
              />

              <feDisplacementMap
                in="SourceGraphic"
                in2="map"
                id="greenchannel"
                result="dispGreen"
              />
              <feColorMatrix
                in="dispGreen"
                type="matrix"
                values="0 0 0 0 0
                      0 1 0 0 0
                      0 0 0 0 0
                      0 0 0 1 0"
                result="green"
              />

              <feDisplacementMap in="SourceGraphic" in2="map" id="bluechannel" result="dispBlue" />
              <feColorMatrix
                in="dispBlue"
                type="matrix"
                values="0 0 0 0 0
                      0 0 0 0 0
                      0 0 1 0 0
                      0 0 0 1 0"
                result="blue"
              />

              <feBlend in="red" in2="green" mode="screen" result="rg" />
              <feBlend in="rg" in2="blue" mode="screen" result="output" />
              <feGaussianBlur stdDeviation="0.7" />
            </filter>
          </defs>
        </svg>
      )}

      <div className="w-full h-full flex items-center justify-center p-2 rounded-[inherit] relative z-10">
        {children}
      </div>
    </div>
  );
};

export default GlassSurface;

This is a modified component with a flat parameter for Gecko browsers. Example of use:

<GlassSurface 
  flat={true}
>
   // your content here
</GlassSurface>