Currently, I am in the process of revamping a friend's website using Next.js and Tailwind. However, I've encountered a challenge with the background image specifically on iPhones. While it appears fine on browsers like Chrome and Safari as well as in full window and phone variants, it somehow compresses itself only on iPhones. Any thoughts on why this might be happening? Below are screenshots illustrating how it looks on the browser in phone mode versus how it actually appears on an iPhone. Additionally, I have included the code snippet for reference. It's possible that I may have overlooked something significant. Any assistance would be greatly appreciated. Feel free to inquire if you require more information.
.custom-img2 {
background-image: url('https://images.squarespace-cdn.com/content/v1/57becd489de4bb4083a32846/1474057401289-YVPRNRZCTFWWCCZXT8DE/ccro-weee.png?format=2500w ') ;
}
<div>
<div className='flex items-center justify-center h-screen mb-12 bg-fixed bg-center bg-cover custom-img2 sm:custom-img2 md:custom-img2 lg:custom-img2'>
<div className=' top-0 left-0 right-0 bottom-0 bg-black/70 z-[2]' />
<div className='p-5 text-white z-[2] mt-[-10rem] l '>
<h2 className='text-5xl font-bold '>About Us</h2>
<p className='py-5 text-xl '></p>
</div>
</div>
{/* Overlay */}
.............
..............
...............
.............
</div>
https://i.sstatic.net/ItQIj.png
https://i.sstatic.net/KN2Ch.png
I have experimented with Tailwind screens and next/image extensively for a whole day without success.