If I set the following styles onto an element containing the button – in our case, and – the button would remain at the bottom of the page and the Safari nav would remain. Desperate to find an answer, I even tweeted at JackThreads!Īfter much blood, sweat, and tears (or dogged investigation), I stumbled onto a CSS solution.

I spent a bunch more time researching this new potential solution.

How?! I scrambled to figure out how they were forcing the nav to show, but couldn’t pinpoint the fix. I thought it was a hopeless, but then a determined designer on the team discovered that the JackThreads website forced the mobile Safari bottom navigation bar to always show.

Here were some of the designs that we considered should I fail in my quest: The Eventbrite design team was having none of that, but we quickly realized that the dreaded floating button might be our future if I wasn’t able to find a solution. They instead use a floating button, avoiding the dead space the mobile Safari menu created. Note: You’ll notice me attempting to collect Stack Overflow points on all of these posts after finding a CSS solution.Įven Airbnb, whom I consider web design pioneers, seemed unable to find a code-based to this problem.

Stack Exchange – iOS7 Safari and Footer Buttons.

Stack Overflow – Overriding the Bottom and Top Touch Area on iOS7 Safari Landscape.

Stack Overflow – Deadzone in iPhone 6 Plus Safari.

Stack Exchange – Safari iOS Menu Bar Conflicts with Buttons in Loer 10 of the Screen.

Stack Overflow – Buttons Aligned to Bottom of Page Conflict with Mobile Safari’s Menu Ba r.

I started by doing a ton of research on the problem, but was only able to find a series of unanswered questions: When an approximately 44px high space on the bottom of the window is touched, the bottom navigation bar reappears.

It turns out that the normal behavior of mobile Safari is to shrink the top address bar and hide the bottom navigation bar on scroll. All was well in the land of Listings, until one day someone on our E-team noticed while scrolling the event page, the “Get Tickets” button required two clicks to get to the ticket purchase modal.Īnd thus began the month long saga of finding a solution to this problem. We work on the event page, which I like to think of as the heart and soul of Eventbrite. I’m one of the engineers on the Listings team at Eventbrite. Have you ever felt the fear when someone from the Executive team finds a bug on your site? I have.

React app overlaps status bar ios