Bootstrap 4 avec flex, ça marche sur IE11 ou pas?

Bonjour,

je travaille sur une maquette avec Bootstrap 4 et j'ai encore un problème inexplicable avec IE11 (et IE10) qui sont pourtant sensés gérer le flexbox.
Je vous laisse juger avec le code et copie d'écran...

  <section id ="feature">
    <div class="container">
      <h1 class="mb-4">Les points forts du Goëland</h1>

      <div class="row">
        <div class="col-sm-6 col-lg-3  d-flex mb-3">
          <div class="card">
            <img class="card-img-top" src="http://via.placeholder.com/600x400/88B2CC/ffffff?text=image+1" alt="Card image cap">
            <div class="card-body">
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div><!-- /card -->
        </div>
        <div class="col-sm-6 col-lg-3  d-flex mb-3">
          <div class="card">
            <img class="card-img-top" src="http://via.placeholder.com/600x400/5A7C68/ffffff?text=image+2" alt="Card image cap">
            <div class="card-body">
              <p class="card-text">Some quick example text to build on the card title text to build on the card titletext to 
                build on the card titlev and make up the bulk of the card's content.</p>
            </div>
          </div><!-- /card -->
        </div>
        <div class="col-sm-6 col-lg-3  d-flex mb-3">
          <div class="card">
            <img class="card-img-top" src="http://via.placeholder.com/600x400/E4BD46/ffffff?text=image+3" alt="Card image cap">
            <div class="card-body">
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div><!-- /card -->
        </div>
        <div class="col-sm-6 col-lg-3  d-flex mb-3">
          <div class="card">
            <img class="card-img-top" src="http://via.placeholder.com/600x400/F79ED4/ffffff?text=image+4" alt="Card image cap">
            <div class="card-body">
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div><!-- /card -->
        </div>
      </div><!-- /row -->

      <div class="row mt-3">
        <div class="col">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed nunc ac orci aliquet bibendum quis hendrerit lorem. Aliquam posuere dignissim sagittis. Pellentesque tempor quam in rhoncus feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pharetra varius ligula a sagittis. Aliquam accumsan magna ac est pellentesque, at aliquet felis luctus. Vivamus auctor lacinia elit a tincidunt. Curabitur sed urna et sapien pulvinar consectetur ac in risus. Aliquam faucibus tristique lectus, semper malesuada quam tincidunt nec.
       
        </div>
      </div>
    </div><!-- /container -->
  </section>

Modifié par lionel_css3 (23 Oct 2017 - 09:26)

erreur
Modifié par lionel_css3 (23 Oct 2017 - 09:17)

J'utilisais la 4.0.0-beta
j'ai vu qu'il y avait une nouvelle 4.0.0-beta.2

Je l'ai utilisé et ça ne change rien.
Sous IE11 Le flex fonctionne en hauteur avec le 'strech' mais pas au niveau de la largeur, on a l'impression que les images explosent tout, elles s'affichent à 100%.

Je ne suis quand même pas un cas isolé??

Jusqu'à quand Internet Explorer va t-il nous pourrir la vie?

avec des images de 1000 px de large, c'est encore pire...



[edit à 23h24]
J'ai trouvé un fil qui décrit que c'est un bug déjà ancien et qui persiste sous la 4-beta.
Voir cette discution sur github

J'ai essayé le workaround qui consiste à mettre 'display:block;' sur les div de classe .card,
ça fonctionne avec IE11 mais pas avec IE10.
Modifié par lionel_css3 (23 Oct 2017 - 23:28)

Bonsoir,

Il y a apparemment 2 bug en 1, provoqué par l'image trop grande.

Géneralement, avec flex ,
- max-width et
- flex-shrink:0; (par défaut 1 et pas 0 dans IE11),
le défaut de l'image qui déborde ou s’étire se règle assez facilement. (je n'ai pas verifié si il y a dans le css de bootsrap quelquechose qui prend se défaut en compte d'une façon ou d'une autre) .

Dans ton cas , .card, le parent direct est aussi mal affiché ?! .

Pour IE11 , il semblerait que :

 .card  {
  flex:1 0 100% ;
}
img {
  flex-shrink:0;
}

... rattrape ces défauts de calculs et d'affichages.

Pour IE10 , aucune idée du résultat je n'en ai plus sous la main.

pour IE11 , voici un codepen pour le tester: https://codepen.io/gc-nomade/pen/mBYjbd ou l'archive a dézipper pour tester sans l'interface de codepen (attention a ne pas tester seulement en fichier local ) https://codepen.io/gc-nomade/share/zip/mBYjbd/

p.s. workaround donné sans display pour la curiosité du comportement de rendu de IE10
Modifié par gcyrillus (24 Oct 2017 - 01:30)

Bonjour,
Les réponses à ce sujet:
https://forum.alsacreations.com/topic-4-82044-1-Decouper-une-image-en-CSS.html
peuvent peut-être t'aider (voir le lien dans la réponse de Raphael https://la-cascade.io/utiliser-css-object-fit/ )

Même si pour explorer il faut apparemment utiliser un "polyfill".

Merci pour vos réponses..

gcyrillus a écrit :
Bonsoir,

Pour IE11 , il semblerait que
:

 .card  {
  flex:1 0 100% ;
}
img {
  flex-shrink:0;
}

... rattrape ces défauts de calculs et d'affichages.

effectivement, cela semble résoudre le problème (IE10 et IE11), sans affecter Firefox.
Mais faut-il l'employer avec un tag conditionnel IE et une feuille de style à part, pour bien faire?

gcyrillus a écrit :
Bonsoir,


Pour IE10 , aucune idée du résultat je n'en ai plus sous la main.

ben, dans IE11, tu tapes sur F12 et tu as l'émulateur à disposition... jusqu'à IE5

lionel_css3 a écrit :

Mais faut-il l'employer avec un tag conditionnel IE et une feuille de style à part, pour bien faire?

Hello,

Les commentaires conditionnels ne sont plus reconnus depuis IE10

Raphael a écrit :

Hello,

Les commentaires conditionnels ne sont plus reconnus depuis IE10

Hé oui Raphael, je viens de découvrir ça ....

alors j'ai trouvé ce "hack CSS" qui a l'air de fonctionner... ça affecte IE 10 et 11 et pas Edge qui lui marche à peu près bien.
(en fait je savais pas que l'on pouvait tester n'importe quelle propriété CSS dans une media query, mais c'est intéressant et ça tombe à pic)

// ***************************************
//          correctif bugs IE10 & 11
// ***************************************
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /*
      Votre CSS pour IE versions 10, 11 et Edge
   */

    section#feature {
        background-color:#CAF8EA; // couleur différente pour vérifier l'application
    }

    .card  {
      flex:1 0 100% ;
    }
    img {
      flex-shrink:0;
    }   
}

Pourquoi veut tu absolument filtrer IE10 et 11 lorsque que les règles utilisées ici ne sont qu'un reset ? Certes, elles ne sont nécessaire que pour IE10/11, ...mais les autres les appliquent déjà par défaut.

Pour l’émulation de IE10, ... à l'occasion vérifie (ou fait vérifié) quand même dans un vrai IE10.

Cdt,