Why doesn't my flexbox hover effects work as expected in IE 11?

Question

I have instituted a flex-grid in my code, however its not functioning as expected in ie11 (i unfortunately need to have it work there too)—Chrome and Firefox both work fine. What seems to happen is when I load in IE11—the flex boxes only load 1 per line and are no longer hovering appropriately.

I am honestly at a loss here... anything I change breaks Chrome and Firefox.

.flex_row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.flex_col{
    flex: 1;
    margin: 10px;
}
.circle_shape {
    position: relative;
    display: flex;
    padding: 50% 0;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid gray;
    font-size: 16px;
    font-family: 'Source Sans Pro', sans-serif;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}
.circle_shape:before {
    content: "";
    position: absolute;
    top: 1%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
    filter: blur(5px);
    z-index: 2;
}
.circle_shape:hover{
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1); 
}
.circle_shape img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.circle_shape i{
    position: absolute;
    text-align: center;
    font-size: 4vw;
    text-shadow: 
    0 0 1px #fff, 
    0 1px 2px rgba(0,0,0,0.3);
}

.circle_shape h2 {
    position: absolute;
    bottom: 10%;
    font-size: 1vw; 
    font-weight: 800;
    text-align: center;
}

.circle_text{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,51,102, 0.9);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}
.circle_text p {
    color: #fff;
    padding: 4px;
    text-align: center;
    font-size: calc(7px + .5vw);
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}
.circle_shape:hover .circle_text{
    transform: scale(1);
    opacity: 1;
}

 <div class="flex_row">
     <a class="flex_col" href="http://www.cnn.com">
         <div class="circle_shape">
             <i class="fas fa-sitemap"></i>
             <div class="circle_text">
                 <p>Load me some CNN!</p>
             </div>
         </div>
         <div>
             <h2>Beep!</h2>
         </div>
     </a>
     <a class="flex_col" href="http://www.cnn.com">
         <div class="circle_shape">
             <i class="fas fa-sitemap"></i>
             <div class="circle_text">
                 <p>Load me some ABC!</p>
             </div>
         </div>
         <div>
             <h2>BIP!</h2>
         </div>
     </a>
     <a class="flex_col" href="http://www.cnn.com">
         <div class="circle_shape">
             <i class="fas fa-sitemap"></i>
             <div class="circle_text">
                 <p>Load me some BBC!</p>
             </div>
         </div>
         <div>
             <h2>BOOP!</h2>
         </div>
     </a>
 </div>

JSFiddle link

IE11 does not have full support of the flexible box model. Check out https://caniuse.com/#search=flex and switch to "Known Issues" to see if any of those fixes help. — skyline3000, Aug 13 '19 at 17:38
Try switching away from the `flex` shorthand property. Use the long-hand versions instead. https://stackoverflow.com/q/32239549/3597276 — Michael Benjamin, Aug 13 '19 at 18:10
@Michael_B no dice on writing it out long hand -- but I made some changes just in case to (1) changing flex to flex:0 1 10% and (2) removed my margin code from the flex_col. — Alex DiCaprio, Aug 13 '19 at 18:25

score 1 · Answer 1 · answered Aug 13 '19 at 18:26

1

IE 11 partially support flex box. Partial support due to large amount of bugs.

Visit the link for more information.

answered Aug 13 '19 at 18:26

Bijayee Saswata

79
1
4

Understood -- i was just assuming there is some workaround someone may know -- probably around the position relative code, as that is what seems to be going awry – Alex DiCaprio Aug 13 '19 at 18:32
1

This isn't really an answer. It's just a reference (to information that pretty much everybody already knows). – Michael Benjamin Aug 13 '19 at 18:33

score 1 · Answer 2 · answered Aug 14 '19 at 05:17

I try to test with the code in IE 11 and try to modify it for testing purpose. I tried many variations in the code but nothing worked so far.

As a work around, I suggest you to refer example below which is working properly in IE and other browsers.

.ch-item {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  cursor: default;
  box-shadow: inset 0 0 0 0 rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 2;
}
.ch-info {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-backface-visibility: hidden;
}

li {
  position: relative;
  overflow: hidden;
  border-radius: 100%;
}

li img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.ch-info h3 {
  color: #fff;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 2px;
  font-size: 22px;
  margin: 0 30px;
  padding: 65px 0 0 0;
  height: 110px;
  font-family: 'Open Sans', Arial, sans-serif;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ch-info p {
  color: #fff;
  padding: 10px 5px;
  font-style: italic;
  margin: 0 30px;
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.ch-info p a {
  display: block;
  color: #fff;
  color: rgba(255, 255, 255, 0.7);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1px;
  padding-top: 4px;
  font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
  color: #fff222;
  color: rgba(255, 242, 34, 0.8);
}

.ch-item:hover {
  box-shadow: inset 0 0 0 110px rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ch-item:hover .ch-info {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
@import url('normalize.css');

/* General Demo Style */
body{
 font-family: Cambria, Georgia, serif;
 background: #f9f9f9 url(../images/bg.jpg);
 font-weight: 300;
 font-size: 15px;
 color: #333;
 -webkit-font-smoothing: antialiased;
 overflow-y: scroll;
 overflow-x: hidden;
}
a{
 color: #555;
 text-decoration: none;
}
.container{
 width: 100%;
 position: relative;
}
.clr{
 clear: both;
 padding: 0;
 height: 0;
 margin: 0;
}
.main{
 width: 90%;
 margin: 0 auto;
 position: relative;
}
.container > header{
 margin: 10px;
 padding: 20px 10px 10px 10px;
 position: relative;
 display: block;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
.container > header h1{
 font-size: 32px;
 line-height: 32px;
 margin: 0;
 position: relative;
 font-weight: 300;
 color: #777;
 text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
}
.container > header h2{
 font-size: 14px;
 font-weight: 300;
 font-style: italic;
 margin: 0;
 padding: 15px 0 5px 0;
 color: #888;
 text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
}
/* Header Style */
.codrops-top{
 line-height: 24px;
 font-size: 11px;
 background: #fff;
 background: rgba(255, 255, 255, 0.6);
 text-transform: uppercase;
 z-index: 9999;
 position: relative;
 box-shadow: 1px 0px 2px rgba(0,0,0,0.1);
}
.codrops-top a{
 padding: 0px 10px;
 letter-spacing: 1px;
 color: #333;
 display: inline-block;
}
.codrops-top a:hover{
 background: rgba(255,255,255,0.3);
}
.codrops-top span.right{
 float: right;
}
.codrops-top span.right a{
 float: left;
 display: block;
}
/* Demo Buttons Style */
.codrops-demos{
    text-align:center;
 display: block;
 line-height: 30px;
 padding: 5px 0px;
}
.codrops-demos a{
    display: inline-block;
 font-style: italic;
 margin: 0px 4px;
 padding: 0px 6px;
 color: #aaa;
 line-height: 20px; 
 font-size: 13px;
 text-shadow: 1px 1px 1px #fff;
 border: 1px solid #fff;
 background: #ffffff; /* Old browsers */
 background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
 background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.codrops-demos a:hover{
 color: #333;
 background: #fff;
}
.codrops-demos a:active{
 background: #fff;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{
 background: #f0f0f0;
 border-color: #d9d9d9;
 color: #aaa;
 box-shadow: 0 1px 1px rgba(255,255,255,0.7);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}

.support-note span{
 color: #ac375d;
 font-size: 16px;
 display: none;
 font-weight: bold;
 text-align: center;
 padding: 5px 0;
}
.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions{
 display: block;
}
.ch-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}

.ch-grid:after,
.ch-item:before {
 content: '';
    display: table;
}

.ch-grid:after {
 clear: both;
}

.ch-grid li {
 width: 220px;
 height: 220px;
 display: inline-block;
 margin: 20px;
}

<section class="main">

  <ul class="ch-grid">
    <li>
      <img src="http://tympanus.net/Tutorials/CircleHoverEffects/images/5.jpg" alt="Vision">
      <div class="ch-item">
        <div class="ch-info">
          <h3>Brainiac</h3>
          <p>by Daniel Nyari <a href="http://drbl.in/eODP">View on Dribbble</a></p>
        </div>
      </div>
    </li>
  </ul>

</section>

Output in IE:

References:

(1) JSFiddle link

(2) Circle Hover Effects with CSS Transitions

Further, you can try to modify the code example as per your requirement.

Thank you for this -- and you are right as I may just need to revert to blocks on this code... its just a shame as flex gives me a lot more latitude to add more and more items to my grid. Im hesitant to mark it as resolved just yet only due to the fact my issue is trying to get flex to work within ie11 but at some point i need to cut my losses. Is there a clean way to default to flex but then if IE runs to push the code to block? My general research seems to indicate not really... — Alex DiCaprio, Aug 14 '19 at 15:14

score -1 · Accepted Answer · answered Aug 16 '19 at 13:38

I just wanted to follow up on this. Rather than rewrite my code -- I decided to hack around it to define a solution.

First step was to identify this is IE 10+ code in my CSS -- i did that through:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
}

I then redefined my flex_container and flex_item as block (using column code as follows) inside the @media query

[class*="flex_item"] {
        float: left;
        padding: 15px;
}

.flex_container{
        display: block;
        overflow: hidden;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: none;
        font-size: 16px;
}

.flex_item {width: 8.33%;box-sizing: border-box;}

I then went through my code and changed any reference to flex to block within that code. Its a lot of duplication but it essentially got me back to @deepak-MSFTs response.

This effectively resolves my issue.

Why doesn't my flexbox hover effects work as expected in IE 11?

3 Answers3