แถบเมนูซาฟารี IOS ขัดแย้งกับปุ่มที่ต่ำกว่า 10% ของหน้าจอ

ฉันกำลังสร้างเว็บพอร์ทัลซึ่งจะต้องใช้งานได้และสวยในหลาย ๆ แพลตฟอร์ม หนึ่งในแพลตฟอร์มคือ IOS Safari และนี่คือปัญหาที่ฉันพบ ในรหัสของฉันฉันจัดตำแหน่งปุ่มลอยสองปุ่มที่ด้านล่างของ div ที่มีความกว้างและความสูง 100% ทั้งหมดนี้ทำงานได้ดีและปุ่มของฉันปรากฏขึ้นเหมือนที่ควรจะอยู่ที่ด้านล่างของหน้า อย่างไรก็ตามเมื่อฉันคลิกปุ่มมุมมองกะทัดรัดจากซาฟารีมือถือจะเปลี่ยนเป็นมุมมองแบบเต็มและปุ่มของฉันจะถูกซ่อนอยู่หลังแถบนำทางด้านล่าง!

เป็นพฤติกรรมปกติหรือไม่ที่ Safari บนมือถือจะแสดงเมนูแบบขยายเมื่อผู้ใช้แตะที่ด้านล่าง 10% ของหน้าจอ? ฉันจะหลีกเลี่ยงสิ่งนี้ได้อย่างไร

ใน gif นี้คุณสามารถเห็นปัญหาในการจำลอง IOS:
คุณสามารถเห็นปัญหาเกิดขึ้นเฉพาะเมื่อปุ่มอยู่ในมุมมอง 10% ที่ต่ำกว่า นี่เป็นเพียงปุ่มปกติรหัสของฉันถูกตรวจสอบสามครั้งโดยนักพัฒนาหลายคนและไม่มีข้อผิดพลาด

นี่เป็นพฤติกรรมปกติใน Mobile Safari การแตะที่ด้านล่างจะแสดงตัวเลือกเบราว์เซอร์ที่หลากหลายและเลื่อนหน้าเว็บขึ้นตามลำดับ ฟังก์ชันการทำงานของหน้าเว็บยังคงเหมือนเดิมดังนั้นผู้ใช้ยังคงสามารถแตะที่ปุ่มหลังจากเลื่อนเพื่อเข้าถึงฟังก์ชันการทำงานที่มีอยู่

ฉันคิดว่าฉันอาจพบคำตอบ การตั้งค่าเนื้อหาของคุณให้มีสไตล์ดังนี้

• height: 100% (อนุญาตให้เนื้อหาเติมวิวพอร์ตและอยู่ด้านล่างสุด)
• overflow-y: scroll(อนุญาตให้คุณเลื่อนด้านล่างวิวพอร์ตซึ่งเป็นค่าเริ่มต้นvisible)
• -webkit-overflow-scrolling: touch (เพื่อทำให้พฤติกรรมการเลื่อนราบรื่นขึ้น)

ดูเหมือนว่าจะบังคับให้เมนู iOS ใน Safari ปรากฏขึ้นเสมอ ด้วยวิธีนี้การคลิกปุ่มจะใช้งานได้จริงแทนที่จะเปิดขึ้นเมนู Safari หวังว่านี่จะช่วยได้!