Merge pull request #13 from jonaskuske/v1.1.3

v1.1.3

CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.3] - 2018-12-10
+### Changed
+ - Updated README to include bundle size and SSR-compatibility as features
+ - Minor improvements to JSDoc typings
+### Fixed
+ - Automatically prefix `anchor.pathname` with leading slash if it's missing in `isAnchorToLocalElement()`, fixes flickering in IE9 (caused by clicks being handled by `handleHashchange()` instead of `handleClick` due to click handler not detecting the anchor)
+ - Use correct property value in `font-family` example in README 
+
 ## [1.1.2] - 2018-12-10
 ### Fixed
  - Include minified version in bundle published to npm

README.md

@@ -20,12 +20,15 @@
  - ✔ Smooth scroll to target when clicking an anchor
  - ✔ Smooth scroll to target on hashchange (◀/▶ buttons)
  - ✔ Updates URL with #fragment
- - ✔ Handles focus
+ - ✔ Handles focus for improved accessibility
+ - ✔ Doesn't break server-side rendering
+ - ✔ 1.2KB gzipped
+
+⚠ Requires smooth scroll for `window.scroll()` and `Element.scrollIntoView()` (e.g. [smoothscroll-polyfill](http://iamdustan.com/smoothscroll/)) to work!
 
  
 
 ## Browser support
-⚠ Requires smooth scroll for `window.scroll()` and `Element.scrollIntoView()` (e.g. [smoothscroll-polyfill](http://iamdustan.com/smoothscroll/)) to work!
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
 | --------- | --------- | --------- | --------- | --------- | --------- |
@@ -53,9 +56,10 @@ Alternatively, you can specify the property as the name of a custom font family.
 ```html
 <style>
   html {
-    scroll-behavior: instant;
-    font-family: 'scroll-behavior: instant;', 'Roboto', sans-serif;
+    scroll-behavior: auto;
+    font-family: 'scroll-behavior: auto;', 'Roboto', sans-serif;
   }
+
   @media screen and (min-width: 1150px) {
     html {
       scroll-behavior: smooth;

docs/index.html

@@ -325,8 +325,8 @@ <h4 id="hashchange-blink"><span>Scrolling triggered by <code>hashchange</code>
         <h3 id="faq"><span>FAQ</span></h3>
         <h4 id="ssr"><span>Will this break Server Side Rendering?</span></h4>
         <p>No.</p>
-        <h4 id="event-delegation"><span>Polyfill anchors dynamically inserted
-            later</span></h4>
+        <h4 id="event-delegation"><span>Will this work if anchors are inserted
+            after the script was loaded?</span></h4>
         <p>The polyfill uses <a href="https://javascript.info/event-delegation">Event
             Delegation</a> to detect clicks,
           so even if an anchor is added to the page after the polyfill was

index.js

@@ -15,18 +15,16 @@
         global.SmoothscrollAnchorPolyfill = SmoothscrollAnchorPolyfill;
     }
     SmoothscrollAnchorPolyfill.polyfill();
-})(this, function SmoothscrollAnchorPolyfill() {
-
-    /**
-     * Workaround for type check :(
-     * @typedef {{__forceSmoothscrollAnchorPolyfill__: [boolean]}} GlobalFlag
-     * @typedef {Window & GlobalFlag} ExtendedWindow
-     */
+})(this, /** @constructor */ function SmoothscrollAnchorPolyfill() {
 
     var instance = this, isBrowser = typeof window !== 'undefined';
 
     if (isBrowser) {
-        /** @type {ExtendedWindow} */
+        /**
+         * Add flag to Window interface, workaround for type check
+         * @typedef {{__forceSmoothscrollAnchorPolyfill__: [boolean]}} GlobalFlag
+         * @typedef {Window & GlobalFlag} WindowWithFlag
+         * @type {WindowWithFlag} */
         var w = (window), d = document, docEl = d.documentElement;
     }
 
@@ -143,11 +141,16 @@
      * @returns {boolean}
      */
     function isAnchorToLocalElement(el) {
+        // Check if element is an anchor with a fragment in the url
+        if (!/^a$/i.test(el.tagName) || !/#/.test(el.href)) return false;
+
+        // Fix bug in IE9 where anchor.pathname misses leading slash
+        var anchorPath = el.pathname;
+        if (anchorPath[0] !== '/') anchorPath = '/' + anchorPath;
+
+        // Check if anchor targets an element on the current page
         return (
-            // Is an anchor with a fragment in the url
-            el.tagName.toLowerCase() === 'a' && /#/.test(el.href) &&
-            // Target is on current page
-            el.hostname === location.hostname && el.pathname === location.pathname
+            el.hostname === location.hostname && anchorPath === location.pathname
         );
     }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smoothscroll-anchor-polyfill",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Apply smooth scroll to anchor links to replicate CSS scroll-behavior",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",