When switching the screen from desktop to mobile in ReactJS/Tailwind, I have hidden certain images using the following code:
<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>
Specifically, this line is causing issues:
<video autoPlay muted loop className=" hidden lg:block flex mx-auto rounded-xl hover:scale-110 duration-500 cursor-pointer">The problem arises when viewing the video on Safari browser. Despite using CSS classes like lg:block to only display the video on large screens, it appears visible regardless of window size in Safari. I have tried adjusting the breakpoint values and even setting a higher minimum width, but the video remains visible in Safari while working correctly in other browsers.
I have observed that in Chrome, as the window shrinks, the image/video containers also shrink until the video disappears. However, in Safari, the containers do not adjust size accordingly, leading to elements being pushed off the page instead of resizing.
Safari View (Desktop): https://i.sstatic.net/psCK5.png
Other Browsers View: https://i.sstatic.net/LQwUM.png