uikit 3.17.4 → 3.17.5-dev.2224f20af

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.17.4",
+  "version": "3.17.5-dev.2224f20af",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/core/scrollspy-nav.js

@@ -1,7 +1,7 @@
 import {
     $$,
     closest,
-    css,
+    getCoveringElement,
     getTargetedElement,
     hasClass,
     isSameSiteAnchor,
@@ -70,7 +70,7 @@ export default {
                     active = length - 1;
                 } else {
                     for (let i = 0; i < targets.length; i++) {
-                        const fixedEl = findFixedElement(targets[i]);
+                        const fixedEl = getCoveringElement(targets[i]);
                         const offsetBy = this.offset + (fixedEl ? offset(fixedEl).height : 0);
                         if (offset(targets[i]).top - viewport.top - offsetBy > 0) {
                             break;
@@ -103,9 +103,3 @@ export default {
         },
     ],
 };
-
-function findFixedElement(target) {
-    return target.ownerDocument
-        .elementsFromPoint(offset(target).left, 1)
-        .find((el) => ['fixed', 'sticky'].includes(css(el, 'position')) && !el.contains(target));
-}

package/src/js/util/viewport.js

@@ -1,5 +1,5 @@
 import { offset, offsetPosition } from './dimensions';
-import { isVisible, parents } from './filter';
+import { isVisible, parent, parents, within } from './filter';
 import {
     clamp,
     findIndex,
@@ -79,8 +79,8 @@ export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
                 let diff = 0;
                 if (parents[0] === element && scroll + top < maxScroll) {
                     diff = offset(targetEl).top - targetTop;
-                    const fixedEl = findFixedElement(targetEl);
-                    diff -= fixedEl ? offset(fixedEl).height : 0;
+                    const coverEl = getCoveringElement(targetEl);
+                    diff -= coverEl ? offset(coverEl).height : 0;
                 }
 
                 element.scrollTop = Math[top + diff > 0 ? 'max' : 'min'](
@@ -107,14 +107,6 @@ export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
     function ease(k) {
         return 0.5 * (1 - Math.cos(Math.PI * k));
     }
-
-    function findFixedElement(target) {
-        return target.ownerDocument
-            .elementsFromPoint(offset(target).left, 0)
-            .find(
-                (el) => ['fixed', 'sticky'].includes(css(el, 'position')) && !el.contains(target),
-            );
-    }
 }
 
 export function scrolledOver(element, startOffset = 0, endOffset = 0) {
@@ -206,6 +198,24 @@ export function offsetViewport(scrollElement) {
     return rect;
 }
 
+export function getCoveringElement(target) {
+    return target.ownerDocument
+        .elementsFromPoint(offset(target).left, 0)
+        .find(
+            (el) =>
+                !el.contains(target) &&
+                ((css(el, 'position') === 'fixed' && !hasHigherZIndex(target, el)) ||
+                    (css(el, 'position') === 'sticky' && within(target, el.parentElement))),
+        );
+}
+
+function hasHigherZIndex(element1, element2) {
+    return (
+        parent(element1) === parent(element2) &&
+        toFloat(css(element1, 'zIndex')) > toFloat(css(element2, 'zIndex'))
+    );
+}
+
 function scrollingElement(element) {
     return toWindow(element).document.scrollingElement;
 }

package/src/less/components/cover.less

@@ -41,7 +41,6 @@ video[data-uk-cover] {
 /* 1 */
 :not(img,video)[uk-cover],
 :not(img,video)[data-uk-cover] {
-    pointer-events: none;
     /* 2 */
     max-width: none;
     /* 3 */

package/src/scss/components/cover.scss

@@ -41,7 +41,6 @@ video[data-uk-cover] {
 /* 1 */
 :not(img,video)[uk-cover],
 :not(img,video)[data-uk-cover] {
-    pointer-events: none;
     /* 2 */
     max-width: none;
     /* 3 */

package/tests/cover.html

@@ -63,7 +63,7 @@
                     <h3>Iframe (Vimeo)</h3>
 
                     <div class="test-height uk-cover-container uk-light">
-                        <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;byline=0&amp;autoplay=1&amp;loop=1&amp;setVolume=0" width="500" height="281" allowfullscreen uk-cover></iframe>
+                        <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;background=1&amp;keyboard=0" width="500" height="281" allowfullscreen uk-cover></iframe>
                         <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                             <h1>Heading</h1>
                         </div>

package/tests/slideshow.html

@@ -112,7 +112,7 @@
                                     </div>
                                 </li>
                                 <li>
-                                    <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;byline=0&amp;autoplay=1&amp;loop=1&amp;setVolume=0" width="500" height="281" allowfullscreen uk-cover></iframe>
+                                    <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;background=1&amp;keyboard=0" width="500" height="281" allowfullscreen uk-cover></iframe>
                                     <div class="uk-position-center uk-position-small uk-text-center">
                                         <h2 uk-slideshow-parallax="x: 100,-100">Vimeo</h2>
                                         <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>