CSS: Safari ed il problema delle griglie flex con il contenuto generato

Safari ha un problema nel rendering delle griglie flex quando a queste viene applicato il contenuto generato con un determinato valore.

Supponiamo di avere questi stili CSS:

.row {
    display: flex;
    flex-wrap: wrap;
}
.row:after {
    content: '';
    display: table;
}

Si tratta di una situazione comune quando si passa da una griglia basata sul floating (ad esempio Bootstrap 3) ad una griglia flex dimenticando di eliminare il clear creato col contenuto generato.

In pratica le versioni più recenti di Safari, sia desktop che mobile, visualizzeranno le colonne una sopra l'altra e non affiancate.