[docs] Fix missing emotion prefixes

mui · Oct 30, 2022 · 5390da2 · 5390da2
1 parent 626a255
commit 5390da2
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/docs/src/createEmotionCache.ts b/docs/src/createEmotionCache.ts
@@ -1,6 +1,6 @@
 /* eslint-disable default-case */
 import createCache from '@emotion/cache';
-import { Element, RULESET } from 'stylis';
+import { prefixer, Element, RULESET } from 'stylis';
 
 // A workaround to https://github.com/emotion-js/emotion/issues/2836
 // to be able to use `:where` selector for styling.
@@ -19,5 +19,5 @@ function globalSelector(element: Element) {
 
 export default function createEmotionCache() {
   // TODO remove prepend: true once JSS is out
-  return createCache({ key: 'css', prepend: true, stylisPlugins: [globalSelector] });
+  return createCache({ key: 'css', prepend: true, stylisPlugins: [prefixer, globalSelector] });
 }
diff --git a/docs/src/layouts/AppHeader.tsx b/docs/src/layouts/AppHeader.tsx
@@ -24,6 +24,7 @@ const Header = styled('header')(({ theme }) => [
     top: 0,
     transition: theme.transitions.create('top'),
     zIndex: theme.zIndex.appBar,
+    WebkitBackdropFilter: 'blur(20px)',
     backdropFilter: 'blur(20px)',
     boxShadow: `inset 0px -1px 1px ${(theme.vars || theme).palette.grey[100]}`,
     backgroundColor: 'rgba(255,255,255,0.72)',