I’ve got an issue that appears to be specific to IE11< with the parallax effect of my row background image. The background appears to jump rather than scroll smoothly and this only seems to be an issue when using the mouse scroll wheel – if using the scrollbar it works as intended. The issue also affects content within a SmartSlider 3 slide with parallax enabled.
After researching there seems to be plenty of posts about this issue, but no real solutions.
One thing I've thought about is creating 2 widgets, one with parallax and the other without, and trying to display one specifically within IE. I know we can set widget visibility based on screen size/orientation, but does anyone know how I can be prescriptive at browser level?
Thanks,
Chris
Hi Chris,
Do you have a public URL where we can take a look at what’s going on?
Hi Alex,
URL is: https://dev2.luciteinternational.com
I have done some further testing and managed to implement a solution via @Media conditions in the child theme CSS. I’ve duplicated the slider and SO Hero widget, removing the parallax effect then adding to the page in a new row. For each of these new rows I’ve applied a class that is set to only display when browser is IE and also sets the related element with parallax to be hidden in IE.
Thanks,
Chris
Hi Chris,
Thanks. Can you please temporarily disable your workaround so I can inspect this issue?
Thanks Alex,
I’ve duplicated the page and removed the workaround, you can access this page here: https://dev2.luciteinternational.com/home2/
Thanks,
Chris
Hi Chris,
That sort of performance is very unexpected – please view this page for the expected performance.
I suspect there may be a script being run that is significantly degrading performance. Can you try disabling all non-SiteOrigin plugins and see if this fixes the issue? You’ll need to clear all your caches after disabling your plugins.
If it does fix the issue, then try re-enabling your plugins one by one until the issue comes back. This procedure will help diagnose which plugin is causing the issue.
Once we know that, we’ll be able to look at what might be causing the conflict and either solve the problem or help you find an alternative plugin.
If that doesn’t help, please try temporarily switching to one of the default WordPress themes to see if the issue is theme related.
Hi Alex,
I’ll follow your advise for testing. however, this issue is isolated to IE 11 and below from what I can see. All other browsers I’ve tested with; Chrome, Firefox & Safari all show the parallax effect as I would expect.
Also the demo page you provided the URL for shows the same ‘jumping’ in IE as I see on my page, when using the mouse wheel to scroll. Using the scrollbar gives the smooth effect you would expect.
It is for these reasons I’m not sure it is a SO or other plugin issue and more an IE issue, as per the many posts online regarding it. If this is the case do you think there would be any other solution other than what I’ve tested and using a duplicated widget and specific IE class to hide/show the widgets?
Hi Chris,
That’s odd. The parallax on the blog post I linked is the same as other browsers for me. How powerful is the computer you’re using? I ask this sort of issue is mainly a performance related thing so if you’re using either a lower end computer or a large amount of heavy JavaScript running.
Please note that we do not officially support any version of IE prior to 11.
Hi Alex,
The primary device I’ve tested on is a brand new Lenovo X1 Carbon running Win10 with 4GB RAM and SSD, all pages tested in other browsers run the parallax effect as I would expect. I’ve also tested on another laptop running Win10 with 8GB RAM and HDD and a desktop with Win10, 16GB RAM and HDD, again tested in multiple browsers with the same outcome – only an issue in IE11. So i’m not thinking it is a device performance issue.
I’m not expecting it to be an SO issue, as I’ve read a number of posts that state it is an IE specific issue and linked to the scrolling motion of a mouse scroll wheel. However, I wanted to check to see just in case and also if there was an easier way to assign visibility of a widget to IE only.
Having tested with all plugins except Page Builder deactivated the issue is still present. I’ve also tested with a vanilla WP install using Twenty Seventeen theme and only SO Page Builder and widgets bundle active, I can say the issue isn’t as bad as on my development site but it is still there within IE.
It seems a strange issue and I appreciate SO don’t support IE less than 11, I’m not concerned about these versions but as we have about 18% of visits from IE11 I need to ensure they have a good experience.
Might need to put this one down to an IE quirk and just use the method I have with additional widgets and CSS.
Thanks,
Chris
Hi Chris,
This is possible, but it’s not something I would personally recommend as it would result in you needing to have multiple versions of the same widget. Instead, I would instead recommend preventing the parallax. To do this please open any row that has a fixed or parallax background and head over to the row styles sidebar. Open the Attributes settings group and set the Row Class to ie-disable-parallax and save.
Then please add the following CSS to your website:
*::-ms-backdrop, .ie-disable-parallax { background-position: center center !important; background-attachment: scroll; }How does that look?
Thanks for the code Alex, works great for rows within Page Builder that have a parallax background and SO widget within the row. I can’t get it to work within my Smart Slider 3 widget in the first row of the page, but I can pick this up directly with their support.
Many thanks for your help.
Chris
Hi Chris,
Great to hear that helped! :)
Unfortunately, the provided CSS is only designed to affect SiteOrigin Page Builder rows/widgets. It’s possible it could work elsewhere but that’s purely by coincidence.