diff --git a/CHANGELOG.md b/CHANGELOG.md index 55b1c51cab..ecfc29b920 100644 --- 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 index 89eef411b1..0213527854 100644 --- 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 index d83ca08fae..b4d86d7ba7 100644 --- 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); } });