Website judders when scrolling in Internet Explorer


#1

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


#2

Hello Bibs,

Can you please specify the IE version?

Kind Regards, Roman.


#3

Hi there Roman

They are using Internet Explorer 11
Version: 11.674.15063.0

Many thanks

Bibs!

IE version|670x476


#4

IE version


#5

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.


#6

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


#7

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.


#8

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.


#9

OK Roman, thanks as always

All the best

Bibs


#10

You are welcome Bibs, same to you!

Kind Regards, Roman.


#11

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


#12

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


#13

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


#14

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


#15

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?


#16

Thanks Vlad, I’ve removed the code now.

Bibs


#17

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


#18

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


#19

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