ARTICLE AD BOX
On iPhone 11 Safari, tapping any button or input shows the letter above the tap (iOS text selection behaviour) instead of activating the element. Works fine on desktop. Simple test HTML files work fine on the same hosting. But my full page doesn't work on any mobile device (iPhone or Android).
: On iPhone Safari, tapping the button or input below the min-height:100vh hero section shows text selection instead of activating the element. Works on desktop. Why?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: sans-serif; background: #132318; } .hero { min-height: 100vh; display: flex; align-items: center; padding: 2rem; } .quiz { background: #1d3a28; padding: 2rem; margin: 2rem; } .quiz-opt { padding: 15px; background: rgba(255,255,255,.04); border: 1px solid rgba(200,164,90,.3); color: #e8d4a0; font-size: 16px; width: 100%; margin-bottom: 10px; cursor: pointer; } .lead-field { padding: 15px; background: rgba(255,255,255,.06); border: 1px solid gold; color: white; font-size: 16px; width: 100%; display: block; margin-bottom: 10px; } </style> </head> <body> <div class="hero"> <h1 style="color:white">Hero Section</h1> </div> <div class="quiz"> <button class="quiz-opt">Tap me</button> <input class="lead-field" type="text" placeholder="Type here"> </div> </body> </html>