Errors in IE11

Support
#1

We are developing a page at https://2019template.wmcircleofexcellence.com/

Everything looks/works perfectly in Chrome/Firefox/Edge, but in IE there are three kind of critical problems. Normally, when a client tells us that they don’t like the way something looks in IE, we politely explain they should never use that browser and instead join us in the 21st century. However, in this instance the company is massive and they are forced to use IE within their offices.

Issue 1: Choppy Scrolling
Scrolling down the page in any other browser is smooth, but in IE it’s choppy as heck. We’ve tried to apply the smooth scroll plugin, but no matter what we set it at it remains jerky and hard to focus on while scrolling. Smooth scroll also makes it choppier in all the other browsers, so we’d like to improve IE function without negatively impacting other browsers, if at all possible.

Issue 2: V2 Tabs Equal Height Conflict
The V2 Tabs section has an ‘equal height’ setting that we definitely want to keep turned on. However, it creates a really bizarre gap between the #agenda and #adventues sections in IE. If we turn that setting off, it does go back to normal, but again- REALLY want to keep that feature turned on.

Issue 3: Section Background Not Scaling Correctly
When opening the accordion tabs in IE, the section’s background does not expand/scale with the additional vertical space. The effect is a bit white gap in the background:

I’ll reply below this post with login credentials for you. Thanks so much!

#2

Hi Nuera,

Thank you for writing in, if that is the case then you need to reduce the parallax effect you used on the page because that makes the scrolling on IE laggy.

V2 Tabs utilize CSS Flexible Box Layout, which is only partially supported by IE, please turn off the equal height option and use the min-height CSS property instead.

For the getting there background-image, please turn off the parallax and set the size to cover.

Cheers!

#3

Hi Friech,

Thanks for your assistance, I my responses to each section are below:

Choppy Scrolling:
We don’t have significantly more parallax effects on this page than we had built into last year’s site (https://sales.wmcircleofexcellence.com). The only difference is that last year’s site was built on X Theme v4 and this year’s site is built on X Pro. If you could give us any other indication of ways we can reduce the choppiness, that would be appreciated.

Tabs Height:
Happy to apply the min-height css, but unsure of where exactly we would place it. There are so many sub-settings on the v2 Tabs that it could go in dozens of places. Please advise.

Section Background Not Scaling:
We set the background to cover and removed parallax, but the same problem is occurring. Please advise.

Thanks so much for your assistance :slight_smile:

#4

Hi @Nuera,

  1. The difference that I can see is the Smooth Scroll plugin, and it’s active from your old site. While inactive your new one. Please install the same plugin and activate it.

  2. As for tabs height, I say turn on the equal height option and just add this CSS to Tab’s element CSS since the issue is only specific to IE.

@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, $el .x-tabs-panels {
        height: auto !important;
  }
}

Though, there is a spacing issue in IE either the full-height is toggled on or off because of the added height in the background image of that section. So perhaps, instead of applying the fix for tabs height, the background image height should be fixed. And apparently, the fixed background height is only happening on IE, I’m not sure what’s adding it as it’s not happening on my own installation.

IE

Chrome

You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Else, please add this CSS to your global custom CSS

@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, .x-bg {
        height: auto !important;
  }
}

You don’t have to do these both, please try this background fix first and ignore the tab height fix. OR, ignore this background fix and do the tab height fixes.

  1. Probably related to 2) background issue which creates spacing when the tab height changes. The height is fixed, so it will not respond.

Let us know how it goes!

#5

Thanks Rad-

Here is what I attempted from your suggestions:

1) Smooth Scroll:
I turned Smooth Scroll back on again with the same settings from last year’s site, but it is still choppier than I would expect. Can you provide some guidance on how to achieve an even smoother scroll? Nothing I try in the settings seems to improve performance.

2) Tabs Section:
2a) I turned back on equal height in the tab element, then I added the below code where you suggested.

This did fix the weird spatial gap, but the tabs do not maintain their equal height in IE. I’m happy to try using the ‘min-height’ command though. I would just need to know where to place it.

2b) I then undid those changes and applied the global CSS you provided, but that broke every single background image on the page, so I don’t think that path is a great solution. I have since reverted back to the state described above in 2a.

3) ‘Getting There’ Background:
We can hold on this until the Tabs section is fixed, but I do not believe that the two are tied together.

Thanks for your continued assistance :slight_smile:

#6

Hi @Nuera,

It’s a bit smoother now, and the nudging is the effect of multiple parallaxes as Friech suggested. The one in your old site is simple with the single background as parallax. The newer one has multiple background layers which can affect the scrolling performance. Or perhaps, there is a 3rd party feature that contributes to performance issue as well, and I’m not sure why it has fixed height values. How about let’s tackle one issue at a time, they seem to be related so we could narrow it down.

First, forget about the tabs for now and implement the CSS fix

@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, .x-bg {
        height: auto !important;
  }
}

Second make sure tabs equal height is toggled on.

Then test if the tabs, spacing, and backgrounds are okay. That CSS will fix the background and the height that cause overflows and gap.

And yes, that CSS purpose is to fix the gap but also disable the equal height for IE. So let’s do the background height fix first. Then check the tabs and scrolling again.

Thanks!

#7

Ok, so that code just wipes out all the backgrounds on IE altogether.

Also, I definitely want to still observe the equal height for the tabs on IE.

#8

Hi @Nuera,

Yes, and the scrolling became smooth similar to the old site. Which means, it’s caused by multiple background layers of parallax. I recommend switching to single background parallax for smooth scrolling.

That CSS works in the IE inspector, but the working CSS when added to theme option is this

@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, .x-bg {
        height: 100% !important;
  }
}

Please check, the background is now working and the tabs too.

Thanks!

#9

Thanks!

That seems to have fixed most of the background issues for Island Life and Getting there- much appreciated!

Now that seems to have affected the background for the section just below the hero (https://2019template.wmcircleofexcellence.com/#welcome)

Thanks for your continued support :slight_smile:

#10

Hi @Nuera,

It could be due to margin-less column, maybe it behaves differently since it’s a table based layout. Let’s try excluding it, please update your CSS to this

@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, .x-container:not(.marginless-columns) .x-bg {
        height: 100% !important;
  }
}

Hope this helps.

#11

Well that fixed the Welcome section, but unfortunately broke the Island Life and Getting There backgrounds again… hahah

We’re so close, Rad! Thanks again :smiley:

#12

Hi @Nuera,

Oh, I see it now. It’s a column background (the welcome section).

I changed the CSS to this

@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, .x-section > .x-bg {
        height: 100% !important;
  }
}

Cheers!

1 Like
#13

Rad - that’s perfect!!! Thank you so much for all your support!

#14

You’re welcome. Please just keep in mind that the given custom code uses non-standard techniques. It should only be taken as a guide and not as part of our support.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.