Hello!
We are using the AcceptJS hosted form in an application and found an odd behavior. When the form is displayed or hidden, the styles applied to show the form are _opacity_ and _visibility_. This is causing issues with how the form is being rendered on mobile devices (Specifically in the Safari and Chrome browsers on iOS). The _div_ element that contains the form (id="AcceptUIContainer") seems to still be rendered over the content on the page. This makes all of the content under this element visible but the user cannot interact with these elements.
I wrote up a quick demo to illustrate the issue:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://jstest.authorize.net/v3/AcceptUI.js" charset="utf-8"></script>
<style>
#clickBtn {
margin-left:45%;
}
</style>
</head>
<body>
<h1>Hello Authorize.NET!</h1>
<p>
Click the link to open the Authorize.NET Accept.js window. Exit the window by either entering test information or by clicking the exit button at the top right. At this point try to click the button that was obscured by the modal window.
</p>
<p>
On desktop environments there is no issue. On mobile environments, the modal window is blocking the button from being clicked.(Specifically in the Sarafi browser on iOS)
</p>
<br/>
<br/>
<a class="AcceptUI" href="#">Click to pay</a>
<br/>
<br/>
<div id="btnBox">
<button id="clickBtn" onclick="displayProperties()">Click Me</button>
</div>
<br/>
<br/>
<div id="display">
</div>
<script type="text/javascript">
let count = 0;
function displayProperties() {
const display = document.getElementById('display');
display.innerHTML += ++count + ' clicked<br/>';
}
</script>
<p>
In some in-house testing, adding <code>display: none</code> to the <code>#AcceptUIContainer</code> and <code>#AcceptUIContainer.show</code> styles will remediate this issue. The same fix is necessary for the <code>#AcceptUIBackground</code> styles. The last part of the solution will be to remove the <code>display: block</code> style from the inline styles on the <code>AcceptUIContainer</code> and <code>AcceptUIBackground</code> HTML elements.
</p>
</body>
</html>
It looks like some small changes in the styling would solve this issue.
If any more information would be helpful, let me know.
Thanks!
