'Link (<a href) remains focused after opening URL in new tab (only in Chrome Android)

I have a webpage where the (really simple) links are opening the URLs in new tabs:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer"></a>

The following problem appears on Android Chrome, but not on Windows or Samsung Internet browser on Android (so I guess it's something only with Chrome and Android): When I click a link from my site, go back to my site, scroll down to a new link, and click that new link, right before opening the new tab, I can see, that my page scrolls back to the previously opened link location. And I could find out that when I click a link, it remains focused, even a new tab is opened, and I go back to my page, the clicked link is still focused. (I could find that out by changing colors, so I can see, which link is focused.)

This happens step-by-step:

  1. I open my page.
  2. I click on the link #1.
  3. The URL of it opens in a new tab.
  4. I go back to my page, where I can see, that the #1 link is still blue, focused. (The normal unclicked links are white.) I scroll down to see the other links.
  5. I click on a different link, for example #12.
  6. Right before the new tab opens with the URL of the link #12, I can see, that my page jumps back to the location of the previously opened link (#1).
  7. So when I go back to my page, I can see, that #12 link is still blue, focused. So when I scroll down, click on another link, first it jumps back to #12 before opening the new URL.

I found similar issues discussed here, but all of them wanted to remove only the focused color, not the focus itself. And I think I have to remove somehow also the focus from the already clicked link to prevent the scrolling back to it.

I tried this.blur();, but that removes only the focus color. I tried also return false;, but that prevents the opening of the link.

I'm using Bootstrap 4, I don't know if that matters or not, but maybe useful info. (Please see UPDATE #1 regarding this.)

I hope someone knows the solution for that annoying issue.

Thank you in advance.

UPDATE #1 So it turned out, it's not because of Bootstrap. I have created a blank .html file, added only the <a href lines, and a lot of <br> between them to be able to see the "jumpings". And it does the same... The exact same thing. But only in Chrome Android... Really annoying, and can't find the reason nor the solution.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source