Mobil Menüm sadece Iphone'larda görünmüyor. CSS Ustaları yardım lütfen.

Merhaba

Web sitemde mobil menü mevcut. Fixed şeklinde sayfanın en altında yer alıyor.

Js ile Hamburger ikona tıklanınca width:0% olan soldaki divi width:100% ye çevirerek soldan sağa genişliyor ve menü içerikleri geliyor. Şimdi problem şöyle ki, Dolu olan menü içerikleri overflow-x:hidden; kodu ile gizleniyor. Tüm cihazlarda çalışıyor menü fakat sadece Iphonelarda çalışmıyor. Safari de değil Iphone'dan chrome ile de girseniz menü görünmüyor bile.

Fakat overflow-x:hidden; kodunu div'den kaldırırsam IPhone'da da menü görünüyor fakat gizleme yapılamadığı için sol divin bir kısım içeriği taşmış oluyor yani bu şekilde durumu çözemiyorum.

Çalışan örnek;

https://codepen.io/ouz-kaan-yataan/pen/jOWWOzo
Bu linke Iphone'dan girerseniz alt menüde hiçbirşey göremeyeceksiniz. Farklı bir telefon ile girerseniz menüyü göreceksiniz. Bilgisayardan girerseniz de browserı küçültüp menüyü görebilirsiniz.


Ekran fotoğrafı

https://i.stack.imgur.com/S7Qst.png


Yardımlarınızı bekliyorum.

Yazınızı tam okumadan cevap vermişim..

Görmedim hocam ne yazdığınızı, inceleyebildiniz mi? Çok ilginç bir durum bunun nasıl çözüleceğini çok merak ediyorum bir türlü işin içinden çıkamadım.

Css içindeki mobil menü tasarımını @media screen and kısmını iphone tarayıcı çözünürlüğüne göre yazarsan sorun ortadan kalkacaktır.