Weird behaviour of .alignfull Gutenberg objects in IE11

[Benedikt]

Hey guys!
A client site I used a while ago, has a weird behaviour in IE11, and unfortunately, the client uses mainly IE 🙁
Most of the elements look fine, we have some objects which use the Gutenberg .alignfull class, i.e. scale to full width while maintaining the content in the site’s content width.

Now, the .alignfull uses the following code:

.no-sidebar .entry-content .alignfull {
    margin-left: calc( -100vw / 2 + 100% / 2 );
    margin-right: calc( -100vw / 2 + 100% / 2 );
    max-width: 100vw;
    width: auto;
}

Which seems to lead to the IE not interpreting the elements’ width correctly and producing this:
Wrong display
(the two elements normally should be full width and sit below each other.

After a good time of investigating, we found out that maybe it has something to do with the IE interpreting the calc term wrongly – see here: Stackoverflow

Do you know anything about that? The calc css code clearly comes from the Generatepress parent theme, so I really hope you can help.
While I know that IE support is really hard to maintain, here we are forced to do so because the client uses it quite extensively.

I appreciate any help!

Kind regards,
Bene

[David]

Hi there,

are you able to test a Core Block such as an Image Block on a test page to see if the issue persists?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Benedikt]

Yeah, those seem to have the same issue. But we found a solution/workaround on the way:

In an IE hack, we implemented the following:

@media all and (-ms-high-contrast:none)
     div#navigation-block_5c91fd757feac div h2 {
      width: 200px;
     }
     div#navigation-block_5c7ea39a755c1 div h2 {
      width: 200px;
     }

     .navigation.alignfull{
      width: 2800px!important;
     }
     
     figure.wp-block-image.alignfull {
      width: 2800px!important;
     }

Strangely, IE doesn’t like the automatically calculated margins with the width: auto value. In theory, on a big screen >2800px wide, someone could see the end of the background, but I don’t think that many IE users have wide 30″ 4K screens. 😀

[David]

Awesome – thanks for sharing your fix.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Benedikt]

Thank you for the heads up, David! 🙂

[Author]

Posts