Why is my CTA taking one click or two clicks at certain times on Safari to redirect the user to the correct page? On chrome there are no issues with the CTA, it’s only on Safari.
I have already tried:
- Adding
cursor: pointer;
to the element. - Adding an
onTap
andonTapStart
event handler identical to the onClick.. - Removing the assigned CSS styling.
Any help would be greatly appreciated.
Main parts of the code
import React from 'react';
const CTAbuttonMain = (props) => {
return (
<button type={props.type || 'button'} className={`coloured-btn ${props.className}`} onClick={props.onClick} disabled={props.disabled}>
{props.children}
</button>
);
};
export default CTAbuttonMain;`
<CTAbuttonMain className={classnames('outline-dark', { 'btn cta-mini': !isTablet })} onClick={AuthHelper.login}>
Log in
</CTAbuttonMain>
const handleLogin = () => {
AuthHelper.login();
};