search

Financial-Times / o-grid

Responsive grid system
http://registry.origami.ft.com/components/o-grid
94 stars 17 forks source link

o-grid breaks in blackberry 7 #112

Closed wheresrhys closed 8 years ago

wheresrhys commented 8 years ago

The culprit is blackberry's lack of support for flexbox wrap, which means any layouts that wrap columns on smaller screens break. I suggest the best solution is to stop prefixing flexbox properties with -webkit-. Could be challenging to disable the prefixing for o-grid/flexbox only.

AlbertoElias commented 8 years ago

Could you post your test case here?

wheresrhys commented 8 years ago 
// $o-grid-is-silent: false;
@import 'o-grid/main';

.r-grid-container {
    @include oGridContainer();
    background: red;
}
.r-grid-row {
    @include oGridRow();
    background: blue;
}
.col {
    @include oGridColspan((default: 8));
    background: yellow;
}
<div class="r-grid-container o-grid-container">

    <div class="r-grid-row o-grid-row">
            <div class="col" data-o-grid-colspan="12">
                texty texty text
            </div>
            <div class="col" data-o-grid-colspan="12">
                texty texty text
            </div>
            <div class="col" data-o-grid-colspan="12">
                texty texty text
            </div>
            <div class="col" data-o-grid-colspan="12">
                texty texty text
            </div>
            <div class="col" data-o-grid-colspan="12">
                texty texty text
            </div>
            <div class="col" data-o-grid-colspan="12">
                texty texty text
            </div>
    </div>

</div>

Generated styles

.r-grid-container {
    position: relative;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    min-width: 240px;
    max-width: 1220px;
    padding-left: 10px;
    padding-right: 10px;
    background: red
}
@media (min-width: 46.25em) {
    .r-grid-container {
        padding-left: 20px;
        padding-right: 20px
    }
}
@media (min-width: 46.25em) {
    .o-grid-snappy .r-grid-container,
    .r-grid-container--snappy {
        max-width: 740px
    }
}
@media (min-width: 61.25em) {
    .o-grid-snappy .r-grid-container,
    .r-grid-container--snappy {
        max-width: 980px
    }
}
@media (min-width: 76.25em) {
    .o-grid-snappy .r-grid-container,
    .r-grid-container--snappy {
        max-width: 1220px
    }
}
@media \0screen {
    .r-grid-container {
        padding-left: 20px;
        padding-right: 20px;
        width: 980px
    }
}
.r-grid-row {
    clear: both;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap; // these lines
    -ms-flex-wrap: wrap;  // are the cause
    flex-wrap: wrap; // of the bug
    margin-left: -10px;
    zoom: 1;
    background: blue
}
@media (min-width: 46.25em) {
    .r-grid-row {
        margin-left: -20px
    }
}
@media \0screen {
    .r-grid-row {
        margin-left: -20px
    }
}
.r-grid-row:after,
.r-grid-row:before {
    content: ' ';
    display: none;
    display: table\9
}
.r-grid-row:after {
    clear: both
}
.col {
    position: relative;
    float: left;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0%;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    padding-left: 10px;
    display: block;
    -webkit-flex-basis: 66.66667%;
    -ms-flex-preferred-size: 66.66667%;
    flex-basis: 66.66667%;
    min-width: 66.66667%;
    max-width: 66.66667%;
    width: 66.66667%;
    background: #ff0
}
@media \0screen {
    .col {
        min-width: 0!important
    }
}
@media (min-width: 46.25em) {
    .col {
        padding-left: 20px
    }
}
@media \0screen {
    .col {
        padding-left: 20px
    }
}
kaelig commented 8 years ago

Oh lala! There are many devices where the grid is going to break, especially Android < 4.4 and iOS <= 7 (that was on purpose).

You could try this:

OR, with modernizr, send a float-based grid to devices that only support the old flexbox spec (and don't support flex-wrap). That should be doable considering IE8 & 9 get a float-based grid.

wheresrhys commented 8 years ago

Oui, sacre bleu!

I think the 3 bullet points are the correct approach. Unfortunately it'll mean a few /* autoprefixer: off */ and a bit of manual prefixing of the flexbox stuff (both here and in other components). I can't think of a cleaner way to do it.

Have you fixed salesforce yet?

andygout commented 8 years ago

Also affecting iOS Safari 6 (and Safari 6 in general, although Safari 6 on iOS is a supported browser). Have just done a sweep of other supported browsers and it's only the ones mentioned in this issue that seem to be affected.

http://caniuse.com/#search=flexbox

wheresrhys commented 8 years ago

Addressed in https://github.com/Financial-Times/o-grid/pull/114

wheresrhys commented 8 years ago

For the record https://github.com/postcss/autoprefixer/issues/573