d3 / d3-geo-projection

Extended geographic projections for d3-geo.
https://observablehq.com/collection/@d3/d3-geo-projection
Other
1.1k stars 201 forks source link

Update README.md #206

Closed likev closed 3 years ago

likev commented 3 years ago

fixed hash duplication of #geoproject and #geostitch

Fil commented 3 years ago

The current anchors (which differ on case: #geoProject vs #geoproject) work for me in Chrome. In what browser have you noticed the issue?

(Note: it might be a good idea anyway to differentiate them properly.)

likev commented 3 years ago

In what browser have you noticed the issue?

I use latest Firefox(v86.0) and it doesn't work properly. It seems that anchors are case-sensitive according to HTML5 but it used to be case-insensitive in HTML 4.01. https://push.cx/2015/case-sensitivity-in-in-page-anchors

Fil commented 3 years ago

Confirmed the issue on Firefox. Thank you!

Fil commented 3 years ago

Unfortunately this doesn't solve the issue, since the subtitles ### geoproject and ### geostitch also add their own anchors…

likev commented 3 years ago

Unfortunately this doesn't solve the issue, since the subtitles ### geoproject and ### geostitch also add their own anchors…

I'am sorry that this doesn't solve the issue. After more tests I get the following conclusion:

  1. It's not because ### geoproject and ### geostitch add their own anchors(user-content-geoproject and user-content-geostitch correspondingly).
  2. Anchors are case-sensitive in morden browser include Firefox.
  3. It's because that github.com add their own hashchange event handling Listener which change the location.hash to lowercase e and scroll to element whose id is 'user-content-' + e, here is the code from https://github.githubassets.com/assets/behaviors-068d33bb.js
    
    function Ys() {
    if (document.querySelector(':target')) return;
    const e = yt(location.hash).toLowerCase(),
        t = vt(document, 'user-content-' + e);
    t && t.scrollIntoView()
    }

window.addEventListener('hashchange', Ys)

l('click', 'a[href]', function (e) { const { currentTarget: t } = e; t instanceof HTMLAnchorElement && t.href === location.href && location.hash.length > 1 && setTimeout((function () { e.defaultPrevented || Ys() })) })