Tengo ciertas imágenes ocultas cuando la pantalla cambia de escritorio a móvil dentro de ReactJS/Tailwind haciendo lo siguiente:

 <div className="flex shrink flex-row justify-between w-[60%] h-[25%] sm:w-[95%] sm:h-[52%] mb-[-10px] mt-[-15px] lg:mt-0"> <img src={images.screen1d} className=" flex mx-auto lg:h-[105%] h-[115%] hover:scale-110 duration-500 cursor-pointer"/> <video autoPlay muted loop className=" hidden lg:block flex mx-auto rounded-xl hover:scale-110 duration-500 cursor-pointer"> <source src={images.screen3} type="video/mp4" ></source> </video> <img src={images.screen2} className=" flex lg:h-[105%] h-[115%] mx-auto hover:scale-110 duration-500 cursor-pointer" /> </div>

Más concretamente, esta línea en particular:

<video autoPlay muted loop className=" hidden lg:block flex mx-auto rounded-xl hover:scale-110 duration-500 cursor-pointer">

Lo que supongo que sucede es que el video está oculto para todos los tamaños de pantalla menos los grandes, por lo tanto, lg: block; esto es cierto para mi computadora portátil y de escritorio, así como para mi teléfono móvil; sin embargo, cuando abro la misma ventana en Safari, aún muestra el video, independientemente de las dimensiones de la ventana de Safari (nada desaparece cuando achico la ventana y incluso cuando lo amplío, todo se saca de la página). Intenté cambiar lg por md, sm, incluso modificando el ancho mínimo que especifica lg a un número más alto, como 1300 px, y todavía no lo oculta en el navegador.

Esto es exclusivo para Safari, funciona bien en todos los demás navegadores.

EDITAR: He notado que cuando reduzco las dimensiones del navegador en, por ejemplo, Chrome, el div que contiene los contenedores img/video se reduce tanto como pueden, hasta que el video desaparece. Este, sin embargo, NO es el caso con Safari, no se reduce en absoluto para intentar ajustar cada imagen, simplemente la empuja fuera de la página por completo.

Cómo se ve en Safari (Escritorio):

Cualquier otro navegador: