user3365907 February 2016

Anchors without content buggy in Chrome?

I stumble (again) on a browser-specific issue, which may have appeard after recent Chrome updates (or maybe existed before).

In certain cases, using absolutely positioned divs with anchors inside does not work if they have no content (except whitespaces).

The simplest JSFiddle: https://jsfiddle.net/odoppfba/5/

HTML:

<div>
  <a href="#a1">a1 - should jump to BLUE but jumps to GREY</a>
  <br/>
  <a href="#a2">a2 - jumps to the page bottom instead of GREY</a>
  <br>Also, if you remove the DIV wrapping these 2 links+text (not the "anchor-wrapper" div), the behavior is broken even further. Removing the comment in CSS resolves the issue, as well as putting any text into anchors.
</div>

<div class="anchor-wrapper" style="top:400px; background-color:blue;">
  <a id="a1" name="a1"></a>
</div>

<div class="anchor-wrapper" style="top:800px; background-color:gray;">
  <a id="a2" name="a2"></a>
</div>

CSS: body { height:2000px; }

.anchor-wrapper {
  position:absolute; 
  width:32px; 
  height:16px;
}

.anchor-wrapper a:before {
  /*content:"";*/ /* enabling this fixes the behavior, as well as putting any content into anchors or their wrappers */
}

It works fine in all browsers I tested except Chrome.

If any content is set - even empty content "" onto :before - it works as it should in Chrome.

I remember reading about empty anchors malfunctioning in certains browsers (Safari, Opera) long ago, but Chrome? Now? Am I missing something important?

Best regards D

Answers


Yahel February 2016

In HTML5 the a element has no name attribute. If you change it to a div element it will work.

The name attribute on the a element is obsolete. Consider putting an id attribute on the nearest container instead.

-- https://www.w3.org/TR/html-markup/a.html

Post Status

Asked in February 2016
Viewed 2,147 times
Voted 9
Answered 1 times

Search




Leave an answer