Website judders when scrolling in Internet Explorer

Hi Roman and friends

I am told that this site judders and shakes in Internet Explorer when scrolling. http://staffordshiresurfacing.co.uk. It is fine in Microsoft Edge, Firefox and Chrome.

I created it using free version of Moesia.

Any thoughts please?

Thanks

Bibs

Hello Bibs,

Can you please specify the IE version?

Kind Regards, Roman.

Hi there Roman

They are using Internet Explorer 11
Version: 11.674.15063.0

Many thanks

Bibs!

IE version|670x476

IE version

Hello Bibs,

It looks like IE issue:

https://answers.microsoft.com/en-us/ie/forum/ie11-iewindows8_1/choppy-static-background-using-smooth-scroll/8b53a32b-db21-4fa3-a61d-7732f3fc217a

https://answers.microsoft.com/en-us/ie/forum/ie11-iewindows8_1/ie11-choppyjerky-schrolling-on-windows-81-fresh/fed4462b-1545-4f70-8527-24a1cb27858d

You can try to disable Smooth Scroll in IE itself and see if it helps.

Kind Regards, Roman.

Hi Roman

Thanks for the info. I have searched and found this possible solution but I am unable to test it myself as none of my devices run IE11. Do you think this snippet would fix the problem or break the theme?

thanks again

Bibs

Hello Bibs,

I don’t have any Windows device as well, but I’ll ask our Developer, let’s see what he says.

Kind Regards, Roman.

Hello Bibs,

Well, it might work, but you should keep an eye on it.

Please remember about importance of regular full site backups (files and database):
https://codex.wordpress.org/WordPress_Backups

Also you might want to check this tutorial:

Kind Regards, Roman.

OK Roman, thanks as always

All the best

Bibs

You are welcome Bibs, same to you!

Kind Regards, Roman.

Hi again Roman, I am re-opening this support ticket as the juddering appears to be only on the header image when a user scrolls down the homepage, and not on any other content. This happens using the mouse wheel and, unlike the users on the forums you sent me, it also judders using the vertical scroll bar.

I have re-tested in Edge and that also judders - so not just IE. I have asked colleagues to test and they have the same error. Header images look fine in Chrome, Firefox and Safari.

I have two sites created using Moesia and both have the same problem. Obviously it’s not practical to ask users to change their IE settings.

Is there a snippet I could add to the site that would prevent the header shaking?

many thanks

Bibs

Hi there,

First of all, I’d like to apologize for the delay.

Here is a temporary solution for you until we figure out a more permanent one. Add it in Customize > Additional CSS:

@media ( min-width: 1025px ) {
_:-ms-lang(x), .has-banner { position: static; }
_:-ms-lang(x), .welcome-info { top: 300px !important; }
}

Let me know how it goes.

Vlad

Hi Vlad!

Thank you very much, that is much better. The only problem now is that there is a big space between the header image and the first row, see screenshot attached. This doesn’t appear in Chrome.

Thanks again

Bibs

Sorry Vlad, I have just asked a colleague to test in IE and he reports that it still judders. However, it no longer judders in Microsoft Edge, which I have.

Could you test too please?

Many thanks

Bibs

Hi,

So fixing it for IE is not an option. I’m afraid IE and Edge just have trouble handling fixed background attachments.

Can you please remove the code I gave yyou so I can have another look?

Thanks Vlad, I’ve removed the code now.

Bibs

Hi Vlad, have you made any progress with this problem? My client is delaying launch of his second larger site until this is fixed. Many thanks, Bibs

Hi,

Sorry for not replying sooner, I just become aware of your replies.
So unfortunately, as I was saying before, IE handles parallax rather poorly and Edge also has some issues with it.
I believe disabling it for them is the way to go:

@media ( min-width: 1025px ) {
	_:-ms-lang(x), .has-banner::after { background-attachment: scroll; }
	_:-ms-lang(x), .welcome-info { top: 300px !important; }
}

Vlad

Hi Vlad

Only just had confirmation from my client that this works for them!

Great news and many thanks for persevering with this fix.

Best wishes

Bibs