diff options
| author | Matthew Somerville <matthew-github@dracos.co.uk> | 2017-03-16 16:04:08 +0000 |
|---|---|---|
| committer | Matthew Somerville <matthew-github@dracos.co.uk> | 2017-03-16 16:04:53 +0000 |
| commit | a4d015e48ae374102bd9b19f9633dda3f6b9ccdd (patch) | |
| tree | 072cb86d44c51fedbb49ef9329628fa260a0f958 | |
| parent | 4afd0026262dd74425d40ac78649db3d8148c883 (diff) | |
Fix invisible segmented controls in old Webkit.
I can't put it better than
https://roland.codes/blog/legacy-flexbox-invisible-float-bug/ :
"Webkit’s implementation of legacy Flexbox has an strange bug that makes
flex items become invisible when they’re floated. What makes it strange
is that the flex items will still take up space in the DOM, as if they
have visibility: hidden applied.
Usually you wouldn’t use float on flex items (the spec even says that
float has no effect on them). But it’s useful for providing a fallback
layout when Flexbox isn’t supported.
Luckily I chanced on a hack that fixes the bug. All you have to do is
give the floated flex items a position, like position: relative, and
they’ll (strangely) become visible again. Another option is to use
Modernizr to only apply the float when Flexbox isn’t supported.
This bug affects legacy Flexbox in all Webkit browsers. Which includes
Chrome 20-, Safari 6-, iOS 6.1- and Android 4.3-."
| -rw-r--r-- | web/cobrands/sass/_base.scss | 1 |
1 files changed, 1 insertions, 0 deletions
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 366939d4c..33242f5af 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -2173,6 +2173,7 @@ table.nicetable { text-align: center; border-right-width: 0; // avoid double border between items float: left; // float fallback for browsers that don't support flexbox + position: relative; // Make sure this is shown on legacy flexbox webkit @include flex(1 0 auto, 1); } |