cssreactjshyperlinkmobile-safarimobile-chrome

Div onClick link not working on mobile safari but works on chrome

I have a link to download pdf file which is working on desktop & mobile chrome; but not on mobile safari browser.

I suspected the issue with hover and removed it. but still not working.

I have the below code on React.

<div className={styles.link} onClick={downloadPDF}>
     Download 
</div>

And the css is

.link {
  padding-top: 10px;
  color: blue;
  text-align: right;
  cursor: pointer;
  &:hover {
    color: blue;
    text-decoration: underline;
  }
}

This css didnt work so removed hover like below, but still not working.

.link {
  padding-top: 10px;
  color: blue;
  text-align: right;
  cursor: pointer;
  text-decoration: underline;  
}

Is there any help anyone can suggest?

Solution

  • I have got a resolution. Disabled the Popup blocker on Safari Settings. It worked. Now it popsup and asks whether to allow it or not when clicking on the link.