uikit 3.15.23-dev.aeae9bcb1 → 3.15.23-dev.b2c6f9d01

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.15.23-dev.aeae9bcb1",
+    "version": "3.15.23-dev.b2c6f9d01",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/components/lightbox-panel.js

@@ -1,5 +1,4 @@
 import Animations from './internal/lightbox-animations';
-import Container from '../mixin/container';
 import Modal from '../mixin/modal';
 import Slideshow from '../mixin/slideshow';
 import Togglable from '../mixin/togglable';
@@ -21,7 +20,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Container, Modal, Togglable, Slideshow],
+    mixins: [Modal, Togglable, Slideshow],
 
     functional: true,
 

package/src/js/core/drop.js

@@ -29,7 +29,7 @@ import {
     removeClass,
     within,
 } from 'uikit-util';
-import { isSameSiteAnchor, preventBackgroundScroll, preventOverscroll } from '../mixin/modal';
+import { isSameSiteAnchor, preventBackgroundScroll } from '../mixin/modal';
 
 export let active;
 
@@ -302,20 +302,15 @@ export default {
                         return () => observer.disconnect();
                     })(),
 
-                    ...(this.autoUpdate
-                        ? [
-                              on([document, overflowParents(this.$el)], 'scroll', update, {
-                                  passive: true,
-                              }),
-                          ]
-                        : []),
-
-                    ...(this.bgScroll
-                        ? []
-                        : [preventOverscroll(this.$el), preventBackgroundScroll()]),
+                    this.autoUpdate &&
+                        on([document, ...overflowParents(this.$el)], 'scroll', update, {
+                            passive: true,
+                        }),
+
+                    !this.bgScroll && preventBackgroundScroll(this.$el),
                 ];
 
-                once(this.$el, 'hide', () => handlers.forEach((handler) => handler()), {
+                once(this.$el, 'hide', () => handlers.forEach((handler) => handler && handler()), {
                     self: true,
                 });
             },

package/src/js/mixin/modal.js

@@ -2,7 +2,6 @@ import {
     $,
     addClass,
     append,
-    apply,
     attr,
     css,
     endsWith,
@@ -10,7 +9,6 @@ import {
     isFocusable,
     last,
     matches,
-    noop,
     on,
     once,
     parent,
@@ -148,8 +146,7 @@ export default {
                 );
 
                 if (this.overlay) {
-                    once(this.$el, 'hidden', preventOverscroll(this.$el), { self: true });
-                    once(this.$el, 'hidden', preventBackgroundScroll(), { self: true });
+                    once(this.$el, 'hidden', preventBackgroundScroll(this.$el), { self: true });
                 }
 
                 if (this.stack) {
@@ -294,65 +291,28 @@ function toMs(time) {
     return time ? (endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000) : 0;
 }
 
-export function preventOverscroll(el) {
-    if (CSS.supports('overscroll-behavior', 'contain')) {
-        const elements = [
-            el,
-            ...filterChildren(el, (child) => /auto|scroll/.test(css(child, 'overflow'))),
-        ];
-        css(elements, 'overscrollBehavior', 'contain');
-        return () => css(elements, 'overscrollBehavior', '');
-    }
-
-    let startClientY;
-
-    const events = [
-        on(
-            el,
-            'touchstart',
-            ({ targetTouches }) => {
-                if (targetTouches.length === 1) {
-                    startClientY = targetTouches[0].clientY;
-                }
-            },
-            { passive: true }
-        ),
-
-        on(
-            el,
-            'touchmove',
-            (e) => {
-                if (e.targetTouches.length !== 1) {
-                    return;
-                }
-
-                let [scrollParent] = scrollParents(e.target);
-                if (!within(scrollParent, el)) {
-                    scrollParent = el;
-                }
+let prevented;
+export function preventBackgroundScroll(el) {
+    // 'overscroll-behavior: contain' only works consistently if el overflows (Safari)
+    const off = on(
+        el,
+        'touchmove',
+        (e) => {
+            if (e.targetTouches.length !== 1) {
+                return;
+            }
 
-                const clientY = e.targetTouches[0].clientY - startClientY;
-                const { scrollTop, scrollHeight, clientHeight } = scrollParent;
+            let [{ scrollHeight, clientHeight }] = scrollParents(e.target);
 
-                if (
-                    clientHeight >= scrollHeight ||
-                    (scrollTop === 0 && clientY > 0) ||
-                    (scrollHeight - scrollTop <= clientHeight && clientY < 0)
-                ) {
-                    e.cancelable && e.preventDefault();
-                }
-            },
-            { passive: false }
-        ),
-    ];
-
-    return () => events.forEach((fn) => fn());
-}
+            if (clientHeight >= scrollHeight && e.cancelable) {
+                e.preventDefault();
+            }
+        },
+        { passive: false }
+    );
 
-let prevented;
-export function preventBackgroundScroll() {
     if (prevented) {
-        return noop;
+        return off;
     }
     prevented = true;
 
@@ -360,24 +320,15 @@ export function preventBackgroundScroll() {
     css(scrollingElement, {
         overflowY: CSS.supports('overflow', 'clip') ? 'clip' : 'hidden',
         touchAction: 'none',
-        paddingRight: width(window) - scrollingElement.clientWidth,
+        paddingRight: width(window) - scrollingElement.clientWidth || '',
     });
     return () => {
         prevented = false;
+        off();
         css(scrollingElement, { overflowY: '', touchAction: '', paddingRight: '' });
     };
 }
 
-function filterChildren(el, fn) {
-    const children = [];
-    apply(el, (node) => {
-        if (fn(node)) {
-            children.push(node);
-        }
-    });
-    return children;
-}
-
 export function isSameSiteAnchor(a) {
     return ['origin', 'pathname', 'search'].every((part) => a[part] === location[part]);
 }

package/src/less/components/modal.less

@@ -94,7 +94,6 @@
     z-index: @modal-z-index;
     /* 3 */
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
     /* 4 */
     padding: @modal-padding-vertical @modal-padding-horizontal;
     /* 5 */

package/src/less/components/offcanvas.less

@@ -95,7 +95,6 @@
     background: @offcanvas-bar-background;
     /* 3 */
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
     .hook-offcanvas-bar();
 }
 

package/src/less/components/utility.less

@@ -87,7 +87,6 @@
     padding: @panel-scrollable-padding;
     border: @panel-scrollable-border-width solid @panel-scrollable-border;
     overflow: auto;
-    -webkit-overflow-scrolling: touch;
     resize: both;
     .hook-panel-scrollable();
 }
@@ -139,10 +138,7 @@
  * Enable scrollbars if content is clipped
  */
 
-.uk-overflow-auto {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-}
+.uk-overflow-auto { overflow: auto; }
 
 .uk-overflow-auto > :last-child { margin-bottom: 0; }
 

package/src/scss/components/modal.scss

@@ -94,7 +94,6 @@ $modal-close-outside-hover-color:                $global-inverse-color !default;
     z-index: $modal-z-index;
     /* 3 */
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
     /* 4 */
     padding: $modal-padding-vertical $modal-padding-horizontal;
     /* 5 */

package/src/scss/components/offcanvas.scss

@@ -95,7 +95,6 @@ $offcanvas-overlay-background:                   rgba(0,0,0,0.1) !default;
     background: $offcanvas-bar-background;
     /* 3 */
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
     @if(mixin-exists(hook-offcanvas-bar)) {@include hook-offcanvas-bar();}
 }
 

package/src/scss/components/utility.scss

@@ -87,7 +87,6 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
     padding: $panel-scrollable-padding;
     border: $panel-scrollable-border-width solid $panel-scrollable-border;
     overflow: auto;
-    -webkit-overflow-scrolling: touch;
     resize: both;
     @if(mixin-exists(hook-panel-scrollable)) {@include hook-panel-scrollable();}
 }
@@ -139,10 +138,7 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
  * Enable scrollbars if content is clipped
  */
 
-.uk-overflow-auto {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-}
+.uk-overflow-auto { overflow: auto; }
 
 .uk-overflow-auto > :last-child { margin-bottom: 0; }
 

package/tests/dropdown.html

@@ -18,7 +18,6 @@
                 padding: 15px;
                 border: 1px dashed rgba(0,0,0,0.2);
                 overflow: auto;
-                -webkit-overflow-scrolling: touch;
             }
 
         </style>

package/tests/navbar.html

@@ -19,7 +19,6 @@
             .scroll-container {
                 border: 1px dashed rgba(0,0,0,0.2);
                 overflow: auto;
-                -webkit-overflow-scrolling: touch;
             }
 
         </style>