Canvas Support

Parallax Jittery in IE, Firefox, and Edge

5 replies · opened May 29, 2016

SSWD2011May 29, 2016

Greetings,

I'm using Canvas 4.0.1 to build a website and it's great. But there is a bad issue with parallax scrolling. I've searched your support forum and your Envato comments page for a solution to this issue, but nothing works. For parallax sliders or page sections, the scrolling is terrible, jittery, and jerky in IE 11, Edge, and Firefox, but is smooth in Chrome. To test, I also found this issue present on the demos on your site.

Here are the URLs where the same issue can be seen when using IE 11, Firefox, and Edge:

http://themes.semicolonweb.com/html/canvas/sections.php (Section with Light Parallax Background)
http://themes.semicolonweb.com/html/canvas/rs-demo-hero-web-product-dark.php
http://themes.semicolonweb.com/html/canvas/rs-demo-hero-web-product-light.php

On my homepage (still under development and not public), I'm using the full-screen template from http://themes.semicolonweb.com/html/canvas/rs-demo-hero-web-product-light.php -- The parallax scrolling is terrible.

On all your demo pages that I listed above, the parallax effect is very bad and is jerky and jittery when using IE 11, Edge, and Firefox, but is smooth in Chrome.

Is there a fix for this that you can suggest?

Systems tested on:
Windows 10 Pro x64, using Edge and Chrome
Windows 8.1 Pro x64, using IE 11, Chrome, and Firefox

Thank you.

SSWD2011Jun 12, 2016

[sb_private_reply]I posted this support question over 2 weeks ago and there's still no response or answer. I have a license and purchased support months ago, as well. Please respond to this question. Thank you.[/sb_private_reply]

SSemicolon WebSTAFFJun 13, 2016

Hello,

We Really Apologize about the Delay in replying to your Support Request.

The Parallax Functionality is Custom Made and is Fully Support only on the Canvas Swiper Slider. Revolution Slider is currently not supported fully. We have modified the Codes for the Revolution Slider Templates slightly. Please consider using the Updated Files: https://www.dropbox.com/s/ocshwri3ae9dt48/rs-demo-hero-web-product-dark.html?dl=1 and https://www.dropbox.com/s/4gdfuukrmhmv64h/rs-demo-hero-web-product-light.html?dl=1 .

Regarding the sections.html, please consider adding the background-attachment: fixed !important; to the style attribute of the .parallax Container.

This should definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

SSWD2011Jun 13, 2016

Great. Thank you. I'll try out your fixes today and let you know how they work.

SSWD2011Jun 14, 2016

This seems to work smoother in a test page I ran. But can you tell me what lines of code were added or changed? I've already built my homepage with the original 4.0.1 template and don't want to have to rebuild it using your fixed template page. It would just be too much work for all of my content. If you can tell me which lines of code were added or changed, then I can update my page much easier.

Thank you.

SSemicolon WebSTAFFJun 15, 2016

Hello,

  1. Enclose the .rev_slider_wrapper inside the .slider-parallax-inner Container.

  2. Now, simply add the following JS Code at the bottom of the Page inside the Revolution Slider JS Initialization Code:

revapi68.bind("revolution.slide.onloaded",function (e) {
	setTimeout( function(){ SEMICOLON.slider.sliderParallaxDimensions(); }, 200 );
});

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard