Я использую фреймворк Tailwind CSS для написания стилей. Все работает в хроме и опера но в ФайрФокс не работает.
Не взаимодействуется этот код отвечающий за размытость и яркость:
<div class="backdrop-blur-sm backdrop-brightness-50 h-full">
А вот весь код
<body class="font-sans antialiased">
<div class="basis-full bg-fixed bg-cover bg-no-repeat h-screen " style="background-image: url(https://images.pexels.com/photos/270348/pexels-photo-270348.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)">
<div class="backdrop-blur-sm backdrop-brightness-50 h-full">
<div class="flex justify-between mx-4 p-2.5">
<!-- Вся навигационная панель -->
<div class="">
<!-- Логотип Синергии -->
<div title="Университет Синергия" class="shadow-xl hover:shadow-red-500/40 mx-2 hover:scale-110 ease-in duration-200">
<a href="https://synergy.ru/">
<img src="https://static.tildacdn.com/tild3133-3439-4261-b531-333236653930/Runa.svg" alt="syunergy_logo" class="w-14 h-14 p-1.5 bg-white rounded-md">
</a>
</div>
</div>
<!-- Имя, Войти-Выйти -->
<form class="my-auto" method="POST" action="http://synergy-project/logout">
<input type="hidden" name="_token" value="z9GdchbXSU5mJca00ENrd7gAN3JQ7VCaJ2u66ZTu"> <span title="Ваше имя" class="border border-transparent rounded-md bg-white py-2 px-3 text-sm font-medium text-gray-700 uppercase">Alan Wayne</span>
<a class="hover:scale-110 shadow-xl hover:shadow-blue-500/80 inline-flex items-center px-3 mr-4 py-1.5 bg-blue-700 border border-transparent rounded-md font-semibold text-sm text-white uppercase tracking-widest hover:bg-white hover:text-blue-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150 ml-4" href="route('logout')" onclick="event.preventDefault();
this.closest('form').submit();">
Выйти
</a>
</form>
</div>
<div class="flex justify-center flex-wrap">
<div class="w-96">
<!-- Информация -->
<div class="bg-white px-3 py-3 mt-32 shadow-2xl shadow-blue-500/50 rounded-lg opacity-90 border-4 border-blue-700 break-all h-fit">
<!-- Голова -->
<div class="flex justify-between">
<label class="text-lg font-semibold"> Данные пользователя </label>
<a href="http://synergy-project/edit" class=" border rounded-md py-0.5 px-1 text-gray-400 hover:bg-neutral-400 hover:text-white ">Редактировать</a>
</div>
<!-- Вся информация-->
<div class="mt-3">
<!-- имя и фамилия-->
<div class="flex flex-row flex-wrap ">
<div class=" mx-2 mb-6">
<!-- имя-->
<label class="text-sm ">Имя</label><br>
<span class="text-lg border-gray-400 border-b-2">Alan</span><br>
</div>
<div class=" mx-2 mb-6">
<!-- фамилия-->
<label class="text-sm ">Фамилия</label><br>
<span class="text-lg border-gray-400 border-b-2">Wayne</span><br>
</div>
</div>
<!-- почта -->
<div class="mx-2 mb-6">
<label class="text-sm ">Email</label><br>
<span class="text-lg border-gray-400 border-b-2">talkingtom32203@mail.ru</span><br>
</div>
<!-- номер-->
<div class="mx-2 my-6">
<label class="text-sm ">Ваш номер</label><br>
<span class="text-lg border-gray-400 border-b-2">+996707012055</span><br>
</div>
<!-- о себе -->
<div class="mx-2 mb-4 mt-6">
<label class="text-sm">О себе</label><br>
<p class="text-lg border-gray-400 border-b-2">Hello, my name is Alan, im living in Turcey</p>
</div>
</div>
</div>
<!-- Ссылки -->
<div class="mt-5 w-96">
<div class="flex justify-between border-4 shadow-2xl shadow-blue-500/50 opacity-90 border-blue-700 p-1.5 bg-white rounded-md h-fit">
<!-- Инста -->
<a target="_blank" class="my-2.5 rounded-full shadow-xl hover:shadow-rose-500/40 mx-5 hover:scale-110 ease-in duration-200" title="Instagram" href="https://www.instagram.com/synergyuniversity/"><img src="https://www.svgrepo.com/show/331440/instagram.svg" alt="Instagram" width="45" height="45"></a>
<!-- ВК -->
<a target="_blank" class="my-2.5 rounded-full shadow-xl hover:shadow-blue-800/40 mx-5 hover:scale-110 ease-in duration-200" title="VK" href="http://vk.com/synergyuniversity"><img src="https://www.svgrepo.com/show/331634/vk-v2.svg" alt="VK" width="45" height="45"></a>
<!-- ют -->
<a target="_blank" class="my-2.5 rounded-full shadow-xl hover:shadow-red-500/40 mx-5 hover:scale-110 ease-in duration-200" title="Youtube" href="https://www.youtube.com/user/synergytvru"><img src="https://www.svgrepo.com/show/95009/youtube.svg" alt="Youtube" width="45" height="45"></a>
<!-- ТГ -->
<a target="_blank" class="my-2.5 rounded-full shadow-xl hover:shadow-sky-500/40 mx-5 hover:scale-110 ease-in duration-200" title="Telegram" href="https://t.me/synergyunivers"><img src="https://www.svgrepo.com/show/354443/telegram.svg" alt="Telegram" width="45" height="45"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>