From 2bd2e59ed2377b441cc4621d97ef10fe40c45f27 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Tue, 17 Nov 2015 16:54:46 -0800 Subject: [PATCH] Add inner wrapper to off-canvas to fix overflow and jitter issues --- docs/layout/default.html | 4 ++++ docs/pages/off-canvas.md | 24 ++++++++++++++++++------ docs/partials/off-canvi.html | 14 -------------- js/foundation.offcanvas.js | 6 +++--- scss/components/_off-canvas.scss | 27 +++++++++++++++++++++------ 5 files changed, 46 insertions(+), 29 deletions(-) diff --git a/docs/layout/default.html b/docs/layout/default.html index e7fed08d4..4956a0708 100644 --- a/docs/layout/default.html +++ b/docs/layout/default.html @@ -14,6 +14,8 @@ +

+ {{> off-canvi}}

@@ -44,6 +46,8 @@ {{> footer}}

+ diff --git a/docs/pages/off-canvas.md b/docs/pages/off-canvas.md index 205e66054..f68637326 100644 --- a/docs/pages/off-canvas.md +++ b/docs/pages/off-canvas.md @@ -19,14 +19,24 @@ tags: ## Setup -Create an off-canvas menu with the class `.off-canvas` and the attribute `data-off-canvas`. The menu also needs a positioning class, which can be `.position-left` or `.position-right`. Make sure the off-cavnas also has a unique ID so it can be targeted. +To start, create a wrapper to house your entire page. It has the class `.off-canvas-wrapper` and the attribute `data-off-canvas-wrapper`. + +```html + +

+ +``` + +Inside this wrapper, create an off-canvas menu with the class `.off-canvas` and the attribute `data-off-canvas`. The menu also needs a positioning class, which can be `.position-left` or `.position-right`. Make sure the off-cavnas also has a unique ID so it can be targeted. Along with the menu, the main content of your page will be housed in its own container with the class `.main-content` and attribute `data-off-canvas`. ```html -

``` @@ -46,9 +56,11 @@ A design can have two menus: one on the left, and one on the right. Be sure that ```html -

``` diff --git a/docs/partials/off-canvi.html b/docs/partials/off-canvi.html index e5f62c54d..965895f62 100644 --- a/docs/partials/off-canvi.html +++ b/docs/partials/off-canvi.html @@ -25,17 +25,3 @@

Sites

- -

- - -

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js index 872df780d..aa9b13c48 100644 --- a/js/foundation.offcanvas.js +++ b/js/foundation.offcanvas.js @@ -121,7 +121,7 @@ OffCanvas.prototype._init = function() { this._setMQChecker(); } if(!this.options.transitionTime){ - this.options.transitionTime = parseFloat(window.getComputedStyle(document.body).transitionDuration) * 1000; + this.options.transitionTime = parseFloat(window.getComputedStyle($('[data-off-canvas-wrapper]')[0]).transitionDuration) * 1000; } }; @@ -211,7 +211,7 @@ OffCanvas.prototype.open = function(event, trigger) { * @event OffCanvas#opened */ Foundation.Move(this.options.transitionTime, this.$element, function(){ - $body.addClass('is-off-canvas-open is-open-'+ _this.options.position); + $('[data-off-canvas-wrapper]').addClass('is-off-canvas-open is-open-'+ _this.options.position); _this.$element .addClass('is-open') @@ -261,7 +261,7 @@ OffCanvas.prototype.close = function() { var _this = this; Foundation.Move(this.options.transitionTime, this.$element, function(){ - $('body').removeClass('is-off-canvas-open is-open-'+_this.options.position); + $('[data-off-canvas-wrapper]').removeClass('is-off-canvas-open is-open-'+_this.options.position); _this.$element.removeClass('is-open'); // Foundation._reflow(); diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss index 71d342cf3..8795e20a7 100644 --- a/scss/components/_off-canvas.scss +++ b/scss/components/_off-canvas.scss @@ -12,7 +12,7 @@ $offcanvas-size: 250px; /// Background color of an off-canvas menu. /// @type Color -$offcanvas-background: $white; +$offcanvas-background: $light-gray; /// Z-index of an off-canvas menu. /// @type Number @@ -44,28 +44,40 @@ $maincontent-prevent-scroll: true !default; /// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work. @mixin off-canvas-basics { // Extra properties needed on and to make off-canvas work - html, body { height: 100%; } + html { + position: relative; + overflow: hidden; + backface-visibility: hidden; + width: 100%; + } + body { + width: 100%; overflow-x: hidden; - transition: transform $offcanvas-transition-length $offcanvas-transition-timing; + position: relative; backface-visibility: hidden; + @if $maincontent-prevent-scroll == true { &.is-off-canvas-open { - overflow-y: hidden;//proposed change to prevent scroll on offcanvas open. + overflow-y: hidden; } } } + .off-canvas-wrapper { + position: relative; + width: 100%; + transition: transform $offcanvas-transition-length $offcanvas-transition-timing; + } + // Click-to-exit overlay (generated by JavaScript) .js-off-canvas-exit { display: none; - //chris - // position: fixed; position: absolute; top: 0; left: 0; @@ -87,6 +99,8 @@ $maincontent-prevent-scroll: true !default; position: absolute; background: $offcanvas-background; z-index: $offcanvas-zindex; + min-height: 100%; + transform: translateX(0px); } @mixin off-canvas-position( @@ -124,6 +138,7 @@ $maincontent-prevent-scroll: true !default; background: $body-background; transition: transform $offcanvas-transition-length $offcanvas-transition-timing; backface-visibility: hidden; + z-index: 1; @if hasvalue($maincontent-shadow) { box-shadow: $maincontent-shadow; -- 2.47.2