[Resolved] Weird behaviour of .alignfull Gutenberg objects in IE11

Home Forums Support Weird behaviour of .alignfull Gutenberg objects in IE11

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1024511
    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

    #1024755
    David
    Staff
    Customer Support

    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?

    #1028051
    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. 😀

    #1028243
    David
    Staff
    Customer Support

    Awesome – thanks for sharing your fix.

    #1028245
    Benedikt

    Thank you for the heads up, David! 🙂

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.