Discussion :

[Aizen64]

Hello,

j'ai un affichage de cards qui est incorrect sur des version <= a Safari 10.

display: flex; fonctionne correctement sous Firefox et Chrome.

La solution suivante casse tout mon layout :
display: webkit-box;

En gros j'ai besoin de faire ceci :
- si j'ai affaire à Salari en version 10 alors appliquer display:block à toutes mes cards.

Ce qui reste possible de manière dégeulasse en sélectionnant toutes mes cards au chargement du document, d'extraire avec des regex la nomn du navigateur et la version à partir du userAgent et si c'est Safari <= 10 mettre un display:block en style inline.

C'est absolument pas propre mais je ne vois pas d'autre solution.

[psychadelic]

rien de nouveau sous le soleil, ça fait partie des info à connaitre avant de ce lancer dans la maquette d'un site : savoir quels navigateurs son ciblés, et ce qu'il est possible ou non de faire.

=> https://caniuse.com/#search=flexbox

[Invité]

Bonjour,

• Utilisation de boîtes flexibles de CSS
• Rétrocompatibilité de flexbox

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

[Aizen64]

Bien essayé mais ça n'a aucun effet sur mon layout sur l'avant dernière version de Sarai (10), le seul affichage potable c'est de mettre du display: block;

[Aizen64]

Alors, j'ai corrigé le problème de cette façon :

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.safari-flex
{
    display: block !important;
}

Lors du chargement de ce document, je vise les versions de Safari de 6 à 10 en utilisant le userAgent et un filtre de versions pour Sarari.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
_.safariFlexboxHack = function ()
{
    var userAgent = navigator.userAgent;
 
    if ( userAgent.match("Safari" ) && userAgent.match( "Version\/([6-9]|10)" ) )
    {            
        var cards = document.querySelectorAll( "div.card" );
 
        for ( var cardIndex = 0; cardIndex < cards.length; cardIndex++ )
        {
            cards[ cardIndex ].classList.add( "safari-flex" );
        }
    }
}

Ce correctif fonctionne pour les versions de Safari 6.2 ou ultérieures.

Les éléments n'ont pas tous la même hauteur sur le rendu final mais le texte est désormais visible.