nextui [BUG] - Blur is not working on iPhone

NextUI Version

2.4.1

Describe the bug

The blur effect does not work on iPhone. I am using it in the Navbar:

<Navbar isBordered={false} isBlurred={true} // Safari is having issues with backdrop-filter onMenuOpenChange={setIsMenuOpen} >

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Just add a Navbar with isBlurred enabled and try opening the app on an iPhone.

Expected behavior

Should be blurred. It works on Android, Windows and Linux. I assume it's a Safari issue, but I don't have another Apple device to test.

Screenshots or Videos

This is on Android: photo_2024-06-11_17-22-30

This in on iPhone: photo_2024-06-11_17-23-13

Operating System Version

iOS 17.5.1

Browser

Chrome

Jun 11 '24 15:06 dimitrios-git

ENG-999 [BUG] - Blur is not working on iPhone

Jun 11 '24 15:06 linear[bot]

Hi @dimitrios-git, can you please provide the minimal code to reproduce this issue, also are you testing in iPhone Safari or Chrome?

Jun 12 '24 19:06 alphaxek

@alphaxek take a look here: https://github.com/dimitrios-git/next.js-templates/tree/main/next.js-template-hebe this is a template I am working on. The blur does not work on my iPhone any browser, but I think that on iPhone all browsers are using the Safari engine, even Chrome. It works, on my Linux, Windows and Android, any browser.

Jun 12 '24 19:06 dimitrios-git

Hi @dimitrios-git I just tested one of the Navbar component examples from nextui.org it seems to be working. Looks like your style is being overridden.

Test Safari:

Jun 12 '24 21:06 alphaxek

I cannot identify the issue in my end. I created a simple example with the first Navbar from the documentation. Accessing the dev server on LAN with my iPhone that backdrop blur does not work. I created a bookmark with a JavaScript function to see the source code on the iPhone and I can see the DOM with the backdrop-blur classes:

<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/_next/static/css/app/%5Blocale%5D/layout.css?v=1718244978171" data-precedence="next_static/css/app/[locale]/layout.css"><link rel="preload" as="script" fetchpriority="low" href="/_next/static/chunks/webpack.js?v=1718244978171"><script src="/_next/static/chunks/main-app.js?v=1718244978171" async=""></script><script src="/_next/static/chunks/app-pages-internals.js" async=""></script><script src="/_next/static/chunks/app/%5Blocale%5D/layout.js" async=""></script><title>Create Next App</title><meta name="description" content="Generated by create next app"><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"><meta name="next-size-adjust"><script src="/_next/static/chunks/polyfills.js" nomodule=""></script><link rel="preload" href="/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2" as="font" crossorigin="" type="font/woff2"></head><body class="__className_aaf875 antialiased"><script>!function(){try{var d=document.documentElement,c=d.classList;c.remove('light','dark');var e=localStorage.getItem('theme');if('system'===e||(!e&&false)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d.style.colorScheme = 'dark';c.add('dark')}else{d.style.colorScheme = 'light';c.add('light')}}else if(e){c.add(e|| '')}else{c.add('dark')}if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'dark'}catch(e){}}()</script><div data-overlay-container="true"><nav class="flex z-40 w-full h-auto items-center justify-center data-[menu-open=true]:border-none sticky top-0 inset-x-0 backdrop-blur-lg data-[menu-open=true]:backdrop-blur-xl backdrop-saturate-150 bg-background/70" style="--navbar-height:4rem"><header class="z-40 flex px-6 gap-4 w-full flex-row relative flex-nowrap items-center justify-between h-[var(--navbar-height)] max-w-[1024px]"><div class="flex basis-0 flex-row flex-grow flex-nowrap justify-start bg-transparent items-center no-underline text-medium whitespace-nowrap box-border"><p class="font-bold text-inherit">ACME</p></div><ul class="h-full flex-row flex-nowrap items-center data-[justify=start]:justify-start data-[justify=start]:flex-grow data-[justify=start]:basis-0 data-[justify=center]:justify-center data-[justify=end]:justify-end data-[justify=end]:flex-grow data-[justify=end]:basis-0 hidden sm:flex gap-4" data-justify="center"><li class="text-medium whitespace-nowrap box-border list-none data-[active=true]:font-semibold"><a class="relative inline-flex items-center tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-medium text-foreground no-underline hover:opacity-80 active:opacity-disabled transition-opacity" href="#" tabindex="0" role="link">Features</a></li><li class="text-medium whitespace-nowrap box-border list-none data-[active=true]:font-semibold" data-active="true"><a class="relative inline-flex items-center tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-medium text-primary no-underline hover:opacity-80 active:opacity-disabled transition-opacity" href="#" tabindex="0" role="link" aria-current="page">Customers</a></li><li class="text-medium whitespace-nowrap box-border list-none data-[active=true]:font-semibold"><a class="relative inline-flex items-center tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-medium text-foreground no-underline hover:opacity-80 active:opacity-disabled transition-opacity" href="#" tabindex="0" role="link">Integrations</a></li></ul><ul class="flex gap-4 h-full flex-row flex-nowrap items-center data-[justify=start]:justify-start data-[justify=start]:flex-grow data-[justify=start]:basis-0 data-[justify=center]:justify-center data-[justify=end]:justify-end data-[justify=end]:flex-grow data-[justify=end]:basis-0" data-justify="end"><li class="text-medium whitespace-nowrap box-border list-none data-[active=true]:font-semibold hidden lg:flex"><a class="relative inline-flex items-center tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-medium text-primary no-underline hover:opacity-80 active:opacity-disabled transition-opacity" href="#" tabindex="0" role="link">Login</a></li><li class="text-medium whitespace-nowrap box-border list-none data-[active=true]:font-semibold"><a class="tap-highlight-transparent no-underline hover:opacity-80 active:opacity-disabled transition-opacity z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent data-[pressed=true]:scale-[0.97] outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-4 min-w-20 h-10 text-small gap-2 rounded-medium [&amp;>svg]:max-w-[theme(spacing.8)] transition-transform-colors-opacity motion-reduce:transition-none bg-primary/20 text-primary data-[hover=true]:opacity-hover" href="#" tabindex="0" role="button">Sign Up</a></li></ul></header></nav><main><h1>Customers</h1><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p><p>Our customers are our top priority.</p></main><footer><p>Copyright © 2023 ACME. All rights reserved.</p></footer></div><script src="/_next/static/chunks/webpack.js?v=1718244978171" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/css/app/%5Blocale%5D/layout.css?v=1718244978171\",\"style\"]\n0:D{\"name\":\"rQ\",\"env\":\"Server\"}\n"])</script><script>self.__next_f.push([1,"3:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n6:I[\"(app-pages-browser)/./node_modules/@nextui-org/navbar/dist/index.mjs\",[\"app/[locale]/blog/page\",\"static/chunks/app/%5Blocale%5D/blog/page.js\"],\"Navbar\"]\n7:I[\"(app-pages-browser)/./node_modules/@nextui-org/navbar/dist/index.mjs\",[\"app/[locale]/blog/page\",\"static/chunks/app/%5Blocale%5D/blog/page.js\"],\"NavbarBrand\"]\n8:I[\"(app-pages-browser)/./node_modules/@nextui-org/navbar/dist/index.mjs\",[\"app/[locale]/blog/page\",\"static/chunks/app/%5Blocale%5D/blog/page.js\"],\"NavbarContent\"]\n9:I[\"(app-pages-browser)/./node_modules/@nextui-org/navbar/dist/index.mjs\",[\"app/[locale]/blog/page\",\"static/chunks/app/%5Blocale%5D/blog/page.js\"],\"NavbarItem\"]\na:I[\"(app-pages-browser)/./node_modules/@nextui-org/link/dist/index.mjs\",[\"app/[locale]/blog/page\",\"static/chunks/app/%5Blocale%5D/blog/page.js\"],\"Link\"]\nb:I[\"(app-pages-browser)/./node_modules/@nextui-org/button/dist/index.mjs\",[\"app/[locale]/blog/page\",\"static/chunks/app/%5Blocale%5D/blog/page.js\"],\"Button\"]\nc:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\ne:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n10:I[\"(app-pages-browser)/./app/providers.tsx\",[\"app/[locale]/layout\",\"static/chunks/app/%5Blocale%5D/layout.js\"],\"Providers\"]\n13:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n4:D{\"name\":\"\",\"env\":\"Server\"}\n5:D{\"name\":\"App\",\"env\":\"Server\"}\n"])</script><script>self.__next_f.push([1,"5:[[\"$\",\"$L6\",null,{\"children\":[[\"$\",\"$L7\",null,{\"children\":[\"$\",\"p\",null,{\"className\":\"font-bold text-inherit\",\"children\":\"ACME\"}]}],[\"$\",\"$L8\",null,{\"className\":\"hidden sm:flex gap-4\",\"justify\":\"center\",\"children\":[[\"$\",\"$L9\",null,{\"children\":[\"$\",\"$La\",null,{\"color\":\"foreground\",\"href\":\"#\",\"children\":\"Features\"}]}],[\"$\",\"$L9\",null,{\"isActive\":true,\"children\":[\"$\",\"$La\",null,{\"href\":\"#\",\"aria-current\":\"page\",\"children\":\"Customers\"}]}],[\"$\",\"$L9\",null,{\"children\":[\"$\",\"$La\",null,{\"color\":\"foreground\",\"href\":\"#\",\"children\":\"Integrations\"}]}]]}],[\"$\",\"$L8\",null,{\"justify\":\"end\",\"children\":[[\"$\",\"$L9\",null,{\"className\":\"hidden lg:flex\",\"children\":[\"$\",\"$La\",null,{\"href\":\"#\",\"children\":\"Login\"}]}],[\"$\",\"$L9\",null,{\"children\":[\"$\",\"$Lb\",null,{\"as\":\"$a\",\"color\":\"primary\",\"href\":\"#\",\"variant\":\"flat\",\"children\":\"Sign Up\"}]}]]}]]}],[\"$\",\"main\",null,{\"children\":[[\"$\",\"h1\",null,{\"children\":\"Customers\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}],[\"$\",\"p\",null,{\"children\":\"Our customers are our top priority.\"}]]}],[\"$\",\"footer\",null,{\"children\":[\"$\",\"p\",null,{\"children\":\"Copyright © 2023 ACME. All rights reserved.\"}]}]]\n"])</script><script>self.__next_f.push([1,"d:[\"locale\",\"en-US\",\"d\"]\nf:D{\"name\":\"RootLayout\",\"env\":\"Server\"}\nf:[\"$\",\"html\",null,{\"lang\":\"en-US\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"__className_aaf875 antialiased\",\"children\":[\"$\",\"$L10\",null,{\"children\":[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}]}]}]}]\n11:D{\"name\":\"NotFound\",\"env\":\"Server\"}\n11:[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]]\n12:D{\"name\":\"\",\"env\":\"Server\"}\n14:[]\n0:[null,[\"$\",\"$L3\",null,{\"buildId\":\"development\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/en-US/blog\",\"initialTree\":[\"\",{\"children\":[[\"locale\",\"en-US\",\"d\"],{\"children\":[\"blog\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true]}],\"initialSeedData\":[\"\",{\"children\":[[\"locale\",\"en-US\",\"d\"],{\"childre"])</script><script>self.__next_f.push([1,"n\":[\"blog\",{\"children\":[\"__PAGE__\",{},[[\"$L4\",\"$5\"],null],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"blog\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$f\",null],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$11\",\"notFoundStyles\":[],\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/app/%5Blocale%5D/layout.css?v=1718244978171\",\"precedence\":\"next_static/css/app/[locale]/layout.css\",\"crossOrigin\":\"$undefined\"}]]}],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L12\"],\"globalErrorComponent\":\"$13\",\"missingSlots\":\"$W14\"}]]\n"])</script><script>self.__next_f.push([1,"12:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Create Next App\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Generated by create next app\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"meta\",\"5\",{\"name\":\"next-size-adjust\"}]]\n4:null\n"])</script><next-route-announcer style="position: absolute;"></next-route-announcer></body>

However, the blur effect is not showing. It is very likely that I am doing something wrong, but I don't know how to troubleshoot this. All other devices work and also https://nextui.org/ which uses the same Navbar is blurry on my iPhone. I am clueless.

Jun 13 '24 02:06 dimitrios-git

I used the nextui-cli to create a new app and everything works perfectly fine there. Either I messed up the configuration somehow or the different versions of packages cause problems in my manual installation. I will rebuild using nextui-cli. Closing and sorry for the confusion.

Jun 13 '24 03:06 dimitrios-git

I found the issue. I had to add the autoprefixer plugin in my postcss.config.mjs. Maybe this should be added to the documentation in the section for manual installation?

Jun 13 '24 03:06 dimitrios-git

Hey @dimitrios-git its great. Any idea what prefixes are getting added to the element's classes incase of Safari browser after adding autoprefixer? because autoprefixer package is already in it

Jun 14 '24 21:06 alphaxek

I am not sure what you mean by this "because autoprefixer package is already in it". Can you please elaborate?

When a user creates an app using the nextui-cli, the autoprefixer package gets installed and configured automatically, but when they follow the manual installation instructions in the documentation, in Step 2, they are informed about the project's dependency on TailwindCSS, but they are not informed about the autoprefixer dependency, that's why I suggested for this to be added.

About the prefixes that are added: I opened a random simple page in my app and took a diff of the CSS with autoprefixer enabled in the postcss.config.mjs and without.

The prefixes added that are relevant to the menu blurriness are the following:

@@ -5020,7 +5074,8 @@
 }
 .data-\[menu-open\=true\]\:backdrop-blur-xl[data-menu-open=true] {
   --tw-backdrop-blur: blur(24px);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 .data-\[disabled\=true\]\:transition-none[data-disabled=true] {
   transition-property: none;

Jun 14 '24 23:06 dimitrios-git

Hi @dimitrios-git, are you using ES Modules?, in manual installation you jump to tailwindcss link to install it, if there you create next.js app with create-next-app and initialize tailwindcss, these steps generates both postcss.config.js and postcss.config.mjs, and it only configures autoprefixer in postcss.config.js. what is the type in your package.json and which app are you creating next.js, vite?

Jun 28 '24 22:06 alphaxek

I just did another test. I don't know if I am doing something wrong but here's what I do:

$ npx create-next-app@latest test-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /mnt/devel/dimitrios/tmp/test-app.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next

npm warn deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @humanwhocodes/[email protected]: Use @eslint/config-array instead
npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @humanwhocodes/[email protected]: Use @eslint/object-schema instead
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported

added 361 packages, and audited 362 packages in 40s

137 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created test-app at /mnt/devel/dimitrios/tmp/test-app

npm notice
npm notice New minor version of npm available! 10.7.0 -> 10.8.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.1
npm notice To update run: npm install -g [email protected]
npm notice
$ cat test-app/postcss.config.mjs 
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;
$ npm install @nextui-org/react framer-motion

added 195 packages, and audited 557 packages in 53s

138 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
$ cat postcss.config.mjs 
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};
$ cat package.json 
{
  "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@nextui-org/react": "^2.4.2",
    "framer-motion": "^11.2.12",
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.4",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

It seems that by default, create-next-app does not install or configure autoprefixer. One would need to install it and configure it as follows:

$ npm install autoprefixer
$ cat postcss.config.mjs 
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Jun 29 '24 14:06 dimitrios-git

HI @dimitrios-git, Yes true create-next-app doesn't configure autoprefixer in postcss.config.mjs

Jul 13 '24 14:07 alphaxek

Was having this same exact issue on my iPhone SE for a personal website using the navbar, thanks for this find @dimitrios-git

Jul 16 '24 00:07 dalenromelien