feat(plugin-docs): Added firefox backdrop-filter polyfill
MODIFY
packages/plugin-docs/client/theme-doc/Layout.tsx
packages/plugin-docs/client/theme-doc/Layout.tsx
import cx from 'classnames';
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
import Announcement from './components/Announcement';
import { ThemeContext } from './context';
import Head from './Head';
@@ -9,6 +9,25 @@ import Toc from './Toc';
export default (props: any) => {
const [isMenuOpened, setIsMenuOpened] = useState(false);
+ /**
+ FireFox CSS backdrop-filter polyfill
+ https://www.cnblogs.com/coco1s/p/14953143.html
+ */
+ useEffect(() => {
+ let blur = document.getElementById('firefox-head-bg')?.style;
+ let offset = document.getElementById('head-container');
+
+ function updateBlur() {
+ if (!offset || !blur) return;
+ blur.backgroundPosition = `0px ` + `${-window.scrollY + 100}px`;
+ }
+
+ document.addEventListener('scroll', updateBlur, false), updateBlur();
+ return () => {
+ document.removeEventListener('scroll', updateBlur, false);
+ };
+ }, []);
+
return (
<ThemeContext.Provider
value={{
@@ -20,6 +39,7 @@ export default (props: any) => {
>
<div className="flex flex-col dark:bg-gray-900 min-h-screen transition-all">
<div
+ id="head-container"
className="z-30 sticky top-0 dark:before:bg-gray-800 before:bg-white before:bg-opacity-[.85]
before:backdrop-blur-md before:absolute before:block dark:before:bg-opacity-[.85]
before:w-full before:h-full before:z-[-1]"
@@ -28,11 +48,17 @@ export default (props: any) => {
<Head setMenuOpened={setIsMenuOpened} isMenuOpened={isMenuOpened} />
</div>
+ <div className="g-glossy-firefox-cover" />
+ <div className="g-glossy-firefox" id="firefox-head-bg" />
+
{window.location.pathname === '/' ? (
- <div>{props.children}</div>
+ <div id="article-body">{props.children}</div>
) : (
<Fragment>
- <div className="w-full flex flex-row justify-center overflow-x-hidden">
+ <div
+ id="article-body"
+ className="w-full flex flex-row justify-center overflow-x-hidden"
+ >
<div className="container flex flex-row justify-center">
<div className="w-full lg:w-1/2 px-4 lg:px-0 m-8 z-20 lg:py-12">
<article className="flex-1">{props.children}</article>

ADD
packages/plugin-docs/client/theme-doc/firefox-polyfill.css
+/**
+ FireFox CSS backdrop-filter polyfill
+ https://www.cnblogs.com/coco1s/p/14953143.html
+*/
+
+.g-glossy-firefox, .g-glossy-firefox-cover {
+ display: none;
+}
+
+@supports (background: -moz-element(#article-body)) {
+ .g-glossy-firefox-cover {
+ display: block;
+ position: fixed;
+ width: 100%;
+ height: 100px;
+ z-index: 22;
+ background-color: white;
+ }
+
+ .g-glossy-firefox {
+ display: block;
+ position: fixed;
+ width: 100%;
+ height: 100px;
+ z-index: 24;
+ background: -moz-element(#article-body) no-repeat top;
+ filter: blur(10px);
+ }
+}

MODIFY
packages/plugin-docs/client/theme-doc/index.ts
packages/plugin-docs/client/theme-doc/index.ts
+import './firefox-polyfill.css';
import './tailwind.out.css';
// Components
export { default as Hero } from './components/Hero';

feat(plugin-docs): Added firefox backdrop-filter polyfill (#339)