Lightbox not working on IE 11

[samuelstein]

Hello,
the lightbox examples working only on chrome and firefox. in ie only the grey overlay is shown but not the actual content. the js console shows no error.
any ideas?

[ashleydw]

Can you post a debug of the console, and a screenshot?

[samuelstein]

yes.

[ashleydw]

I can confirm this happens, will investigate soon

[baggi97]

It's due to the use of display: flex which isn't fully supported by IE

[prasanna03]

Is there any hacky solution to fix it temporarily (till this bug is fixed)

[gg-iccc]

Any news on this? I've been trying to come up with a work around without any luck.

[ashleydw]

This was introduced in #274, so just use 5.2.0 for now

[kaburkett]

It's great that we weren't the first to find this issue.

Confirmed @ashleydw workaround by replacing our version with 5.2.0:

https://cdnjs.com/libraries/ekko-lightbox/5.2.0

[ashleydw]

@RafaPolit maybe you have a suggestion on fixing the IE flex bug?

[Linewalker]

Change
this._$modalDialog.css('flex', '1').css('maxWidth', width);
to
this._$modalDialog.css('flex', '100%').css('maxWidth', width);

And you're done.

[efnack]

Change the code as Linewalker said.
And to center it on Edge (I did not test it on older IE) add on the next line

if (/*@cc_on!@*/false || !!document.documentMode) this._$modalDialog.css('margin-left', '0').css('margin-right', '0');

[Domtaholic]

We need this fix - fast. We used this lightbox in production and are fuc*** right now.

Please do what you can, as fast as you can. I owe you a beer then ;)

[cseelus]

@Domtaholic Just add the following CSS, no big deal:

.ekko-lightbox .modal-dialog {
  flex: 100%!important;
  margin-left: 0;
  margin-right: 0;
}

Did the same a moment ago, as we have to use 5.3.0 and can confirm this works with IE11.

Thanks @ashleydw for the great work.

[kaburkett]

@Domtaholic no one here is your bitch... contribute if you want open sourced projects to add new features

[chasepeeler]

I fixed the issue with the following:

.ekko-lightbox {
  &.iefix {
    .modal-dialog {
      margin-left: calc(-1 * 50%);
    }
  }
}

Then, in my JS

img.ekkoLightbox({
onShown: function(){
  if(util.ieBrowserIE()){
    $('.ekko-lightbox').addClass('iefix');
   }
 }
});

Don't know if this solution is better or worse than those above, but figured I'd share.

[kanlukasz]

@cseelus solution is working. thanks!

[giedriusr]

So what's the status? Is 5.3.0 the correct version to use or not?

[cseelus]

@giedriusr Yep, 5.3.0 works quite well

[giedriusr]

IE 11 as well?

[cseelus]

Jep, with my additional CSS from above.

[WestFR]

@cseelus solution is working ! Thanks you.

For more information, i have added this on my CSS :

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS */
    .ekko-lightbox .modal-dialog {
      flex: 100%!important;
      margin-left: 0;
      margin-right: 0;
      overflow: hidden;
      -ms-overflow-style: none;
    }
}

This code detects the presence of an IE type browser and apply the style.

In my use case, some images displayed in portrait mode display the vertical or horizontal scroll bar only on IE with this new style.

So, overflow: hidden; & -ms-overflow-style: none; disable the scroll on the element and not display the horizontal and vertical scroll bars !

Hoping that it can help you !

[ashleydw]

Hopefully fixed in https://github.com/ashleydw/lightbox/releases/tag/v5.4.0-rc

I changed the flex from 1 to 100% as per the comments above

[KminekMatej]

Confirming fixed in RC5.4 - images are already displaying correctly in Edge.
There still presist an issue in IE, where images are displayed but not centered.

But, yeah, IE is such a dead horse that thats probably not worth even mentioning than fixing :-)
Thanks for the fix

EDIT: Now I realized this issue is called IE11 fix. Well, not fixed then - image is not centered

[ashleydw]

👍 thanks @KminekMatej

Not centered vertically or horizontally? Vertically is expected as per Bootstrap modal.

A new option verticalAlignCenter will vertically center the modal.

[KminekMatej]

Like this, so horizontaly: