Why am I having a CSS issue with AcceptUIContainer on iOS exclusively?

Question

I am building a website, hopsandbarrelstours.com. The checkout page contains an Authorize.net accept.js submit button. In Chrome on Windows and Android, the checkout form works splendidly. However, in iOS (whether in Chrome or in Safari), there is a CSS issue that is preventing user interaction with many elements on the page.

If you would like to replicate the issue, you can go to hopsandbarrelstours.com/tours.html, select a tour and click the "Book Now" button. This will get you to the offending "checkout.html" page.

After hours trying to diagnose the issue, I finally had a revelation when, on my iPhone, I was able to select and copy hidden text from a "blocked" area towards the top of the page. When I pasted the copied text, it was the word "Information". Well, that word exists in only one place in my source code, within the code of the Accept.js button. In the source code, it is never presented as text that should be copyable via the browser. However, when the site loads, accept.js adds additional elements to the site as such:

Finally, later contained within the AcceptUIContainer is the following:

Immediately, my first observation is that this container has z-index: 99999, which seems like an obvious culprit for how this element could be blocking interaction with other elements on the page. I do understand the purpose of the high z-index though. When a user clicks the "Enter Credit Card Information" submit button, it appears as such:

Obviously, it is very important that this element be presented above every other element on the page.

VERY Important: Please notice the word "Information" in this element. That is the only time on this page that the word "Information" is ever presented to the user. This proves to me that this element is the offender.

CONCLUSION

I actually have no idea why this element is NOT interfering with the other elements on the page regardless of OS or browser. But I especially do not understand why it WOULD interfere in iOS when it does not in Windows or Android. More importantly, I have absolutely no idea how to fix this problem! Please help!! (and thank you in advance).

Answer 1

Well, it turns out that once I diagnosed what exactly the problem was, I was able to find a solution fairly easy with Google.

From an Authorize.net Community Post, here is a description of the problem from someone who probably knows more than I do:

It would appear that iOS treats visibilily [sic]: hidden and opacity: 0 differently than other browsers. Interaction events still work on such elements in iOS where they do not on others."

From that same post, a workaround that I can confirm solved my problem is to add the following CSS to my stylesheet:

#AcceptUIContainer {
   max-width:0;
}

#AcceptUIContainer.show {
   max-width:100%;
}

They explain how it fixes the issue:

If you look at the divs that are created by Accept.js you can see how this fixes the issue. It will break if they set a max-width in their style sheet.