Viewport Height component no longer forces box-sizing: border-box

uikit · Sep 25, 2018 · 297cf54 · 297cf54
1 parent b948afd
commit 297cf54
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 ### Changed
 
 - Viewport Height component no longer sets a `height` except for IE  
+- Viewport Height component no longer forces `box-sizing: border-box`  
 - Improve Tooltip performance
 - Improve Parallax performance
 

diff --git a/src/js/core/height-viewport.js b/src/js/core/height-viewport.js
@@ -1,5 +1,5 @@
 import FlexBug from '../mixin/flex-bug';
-import {css, endsWith, height, isNumeric, isString, offset, query, toFloat} from 'uikit-util';
+import {boxModelAdjust, css, endsWith, height, isNumeric, isString, offset, query, toFloat} from 'uikit-util';
 
 export default {
 
@@ -19,19 +19,16 @@ export default {
         minHeight: 0
     },
 
-    connected() {
-        css(this.$el, 'boxSizing', 'border-box');
-    },
-
     update: {
 
         read() {
 
             let minHeight = '';
+            const box = boxModelAdjust('height', this.$el, 'content-box');
 
             if (this.expand) {
 
-                minHeight = height(window) - (offsetHeight(document.documentElement) - offsetHeight(this.$el)) || '';
+                minHeight = height(window) - (offsetHeight(document.documentElement) - offsetHeight(this.$el)) - box || '';
 
             } else {
 
@@ -63,7 +60,7 @@ export default {
 
                 }
 
-                minHeight += ')';
+                minHeight += `${box ? ` - ${box}px` : ''})`;
 
             }
 

diff --git a/src/js/mixin/flex-bug.js b/src/js/mixin/flex-bug.js
@@ -1,4 +1,4 @@
-import {$$, css, isIE, toFloat} from 'uikit-util';
+import {$$, css, height as getHeight, isIE, toFloat} from 'uikit-util';
 
 // IE 11 fix (min-height on a flex container won't apply to its flex items)
 export default isIE ? {
@@ -35,7 +35,7 @@ export default isIE ? {
             write() {
                 this.elements.forEach(el => {
                     const height = toFloat(css(el, 'minHeight'));
-                    if (height && (this.forceHeight || Math.round(height) >= el.offsetHeight)) {
+                    if (height && (this.forceHeight || Math.round(height) >= getHeight(el))) {
                         css(el, 'height', height);
                     }
                 });