Why is href not working on iOS whilst it works fine on any other devices including Mac?

Viewed 165

as per the title it looks like href looks fine anywhere but on iOS devices. The funny thing is that i do have href in the navbar and these ones work fine on iOS too but all the others don't.

This is the website if needed: http://www.fncfranzese.com/

These are the href working anywhere, even on iOs:

<ul className={`header nav-bar nav-list ${menuActive}`} onClick={this.toggleMenu}> 
  <li><a href="#hero" data-after="Home">Home</a></li>
  <li><a href="#services" data-after="Service">Services</a></li>
  <li><a href="#skills" data-after="Skills">Skills</a></li>
  <li><a href="#projects" data-after="Projects">Projects</a></li>
  <li><a href="#about" data-after="About">About</a></li>
  <li><a href="#contact" data-after="Contact">Contact</a></li>
 </ul>

and these are the once not working only on iOS:

<a href="#contact" type="button" className="cta_hero">REQUEST A QUOTE </a>

<div className="social-icon">
  <div className="social-item">
    <a href="https://www.facebook.com/ffkekko" target="_blank" rel="noopener noreferrer"><img src= {require("../img/iconFacebook.png")} alt="facebook-icon"/></a>
  </div>
  <div className="social-item">
    <a href="https://www.instagram.com/ff_franz/" target="_blank" rel="noopener noreferrer"><img src={require("../img/iconInstagram.png")} alt="instagram-icon"/></a>
  </div>
  <div className="social-item">
    <a href="https://api.whatsapp.com/send?phone=393927839583" target="_blank" rel="noopener noreferrer"><img src={require("../img/iconWhatsapp.png")} alt="whatsapp-icon"/></a>
  </div>
  <div className="social-item">
    <a href="https://www.linkedin.com/in/francesco-franzese-7a7243108/" target="_blank" rel="noopener noreferrer"><img src={require("../img/iconLinkedin.png")} alt="linkedin-icon"/></a>
   </div>
 </div>

<div className="contact-info" data-aos="zoom-in" data-aos-delay="1" data-aos-once="true" data-aos-offset="15">
  <h1>Email</h1>
  <h2><a href="mailto:fnc.franzese@gmail.com">fnc.franzese1@gmail.com</a></h2>
</div>

I tried what the web suggests which means adding / before # where applicable but this doesn't work either.

If any of you has any idea of what is happening i would very much appreciate hear from you. Best wishes

1 Answers

This issue is sorted. I had an ::after as fixed instead of absolute that was covering the whole document not allowing to click buttons.

Related