Scrolling down jerky

Permalink Browser Info Environment
Guys

I have used this theme for my business websitehttp://www.radiuswebdesign.com

When you use the navigation the main page scrolls down smoothly on my iMac but when you see it on a Windows laptop it scrolls down jerkily. I am using a basic HP laptop with Winddows 10. It also does this on other machines.

Any ideas please?

Ian

Type: Pre-Sale
Status: In Progress
igrieves
View Replies:
jordif replied on at Permalink Reply
jordif
Hi Ian,

first, please bear in mind that (as stated on the marketplace page) "websites with parallax scrolling and full-page background images are more resource-intensive than usual websites. Be sure to test the demo with different browsers or devices to make sure that the theme meets your requirements. Also note that parallax backgrounds are disabled on mobile for performance reasons."

As a general rule, the longer the page is and the more images & animations you use, the harder it is for the browser to render and scroll the page (specially with old or low-end computers).

That being said, here are some things you can try to make the scrolling smoother:

1. Scroll Speed: I see you have set the speed to 2000 ms. That's pretty slow (the default value is 800). You could try changing that value.

2. Parallax Backgrunds: You are using the "Enabled via CSS" setting (which is generally recommended), but you could try using the "Enabled via JS" option to see if it makes any difference.

3. Text animations: Both the parallax effect and the text animations are triggered as you scroll down, so you could try removing some or all of the text animations to ease the scrolling.

Hopefully by playing with these settings you'll be able to find a balance between visual effects & performance.

By the way, is the demo site also jerky on the windows laptop? Are you experiencing this when scrolling using the menu or the scrollbar/mousewheel? And what browser are you using?


Regards,

Jordi
igrieves replied on at Permalink Reply
igrieves
Hi Jordi,

I tried all the options you suggested and I think it made it overall worse. Certainly no real improvement at any stage. I even tried turning all animations off and reducing the scrolling speed to 3000ms and that made it a little less jerky but no real improvement.

It work fine on my iMac in Safari. I was testing on a HP Laptop running Win 10 on the new IE browser - Edge and also Firefox.

The jerking is happening when using the menu. It also happens when using the mouse but thats the house I think!

Not sure what to do really other than re do the site on another theme.

Yours

Ian

Ian Grieves
Web Producer

t: +44 1242 25 77 60
m: +44 7545 52 17 52
w: radiuswebdesign.com



> On 7 Oct 2015, at 17:44, concrete5 Community <discussions@concretecms.com> wrote:
jordif replied on at Permalink Reply
jordif
Hi Ian,

sorry to hear that.

The site looks ok on my computer, but this weekend I'll have the chance to test it on a laptop with Windows 10 + Edge browser.

A couple more questions if you don't mind:

-> Are you experiencing the same issue with the demo site?

-> Could you try to disable the parallax backgrounds temporarily and see if it makes any difference.


One last thing I've just noticed: I see you have added some custom CSS to the main.css to make all images drop a shadow. That might be causing the scroll issues. The "box-shadow" CSS property is considered very expensive in terms of rendering.

Here is a nice article about that:http://nerds.airbnb.com/box-shadows-are-expensive-to-paint/...

Could you remove the box-shadow styles from the images (lines 15-19 in main.css) and see if it makes any difference?

Hopefully by removing the box-shadow and playing with the previous settings you'll see an improvement.

Obviously, if you feel you can't use the theme and need to rebuild your site, let me know and I'll grant you a refund.

Again sorry for any inconvenience,

Jordi
igrieves replied on at Permalink Reply
igrieves
Hi Jordi,

Thanks for getting back to me so quick - sorry to be a pain.

I disabled the parallax and it made no difference on the Win 10 machine. I then removed the image shadows and no difference either.

Not sure what you mean by the demo site? There is only one site with the issue and thatshttp://www.radiuswebdesign.com

If you can test this over the weekend that would be great. Would you like access to the site just in case it’s something I have done.The theme was quite hard to set up withe various pages and navigation options so I may have done something silly.

If so let me have your email address and I’ll send you admin access codes.

Yours

Ian

Ian Grieves
Web Producer

t: +44 1242 25 77 60
m: +44 7545 52 17 52
w: radiuswebdesign.com



> On 8 Oct 2015, at 12:33, concrete5 Community <discussions@concretecms.com> wrote:
jordif replied on at Permalink Reply
jordif
Hi Ian,

sure, I'll test this over the weekend to see if I can find the issue.

Thanks, I think I don't need access to the site to test this.

Oh, by "demo site" I mean the theme demo site (http://longstoryshort.15robots.com/... )

I'll get back to you on Monday - Tuesday

Regards,

Jordi
igrieves replied on at Permalink Reply
igrieves
Hi Jordi,

Many thanks. I have left the image shadow off for now. It also stutters in Firefox on Win 10. It does however work fine on my iMac?

You will interested to know I have tested your demo site (http://longstoryshort.15robots.com/... ) on my Windows10 HP Laptop in Edge and Firefox and its jerky in the same way as my site there too when using the menu. (Works on the iMac though.)

Definitely something amiss with the theme.

Anyway look forward to hearing. It is quite important for me as this is my business site.

Yours

Ian

Ian Grieves
Web Producer

t: +44 1242 25 77 60
m: +44 7545 52 17 52
w: radiuswebdesign.com



> On 9 Oct 2015, at 08:55, concrete5 Community <discussions@concretecms.com> wrote:
jordif replied on at Permalink Reply
jordif
Hi Ian,

I've finally had the chance to test this on a latop running Windows 10 (a two-year-old HP Pavilion g6).

Cretainly the scrolling in Edge is not as smooth as with other browsers / computers I've tested the theme with.

However, in Firefox and Chrome the scrolling is much smoother (at least on this laptop).

iMacs generally have better hardware specs, so they don't have problems rendering graphically demandig websites.

I was aware that might happen on older and lower-end computers, that's why I added that disclaimer to the marketplace page ("Websites with parallax scrolling and full-page background images are more resource-intensive than usual websites. Be sure to test the demo with different browsers or devices to make sure that the theme meets your requirements. Also note that parallax backgrounds are disabled on mobile for performance reasons.")

Anyway I've spent some time trying to streamline the theme and applying some optimizations. I think I've managed to make the scrolling much smoother in Edge (again, at least on this laptop).

I've just uploaded an optimized version of theme demo site and also an optimized copy of your site to these temp folders:

http://15robots.com/lss-test/

http://15robots.com/radius-test/...


Would you mind checking them on your laptop and see if you notice any improvement when scrolling (in comparison to the original sites)?


Regards,

Jordi
igrieves replied on at Permalink Reply
igrieves
Hi Jordi,

Thank you.

The new LSS one is much better than the original demo but not 100% perfect in that there are still a few shudders.

The Radius new one is much better than the current site, not 100% but 98% if I may say so and almost no shudders - well done.

If you could let me have the updated version of the theme (or put a theme update inside the C5.7 system as usual - at least in 5.6) we can give it a try!

Speak soon.

Yours

Ian

Ian Grieves
Web Producer

t: +44 1242 25 77 60
m: +44 7545 52 17 52
w: radiuswebdesign.com



> On 12 Oct 2015, at 10:15, concrete5 Community <discussions@concretecms.com> wrote:
jordif replied on at Permalink Reply
jordif
Hi Ian,

great, glad there was an improvement :)

I'll send you the opitmized version of the theme in a private message during the week.

I'll also include the optimizations in the public theme eventually, but I want to release them one at a time (to have more control over changes ).

Thanks a lot for your feedback!

Jordi
igrieves replied on at Permalink Reply
igrieves
Thanks Jordi,

Will look out for that. If you can make the upgrade idiot proof please - I’m not the best techie out here! Instructions are good!

Speak soon.

Yours

Ian

Ian Grieves
Web Producer

t: +44 1242 25 77 60
m: +44 7545 52 17 52
w: radiuswebdesign.com



> On 14 Oct 2015, at 08:48, concrete5 Community <discussions@concretecms.com> wrote:
NEONOON replied on at Permalink Reply
NEONOON
Hi, i just like to jump in with experiences and thoughts for this template running Win10.

After reading here about issues on Windows10 using the Microsoft Edge browser, i picked
my quite underpowered HP Stream7 tablet which i bought for testing and gave it a full run
with Edge, Firefox, Chrome/Chromium ..on the demohttp://longstoryshort.15robots.com...

Yes, MS Edge rendered the unoptimized template quite awful, the whole menubar jumps
when scrolling. But testing the other browsers (Firefox,Chrome, etc) i can't say the same.
The scrolling is not superfluently ..but then the 1MB HP Stream7 tablet has not much to
support CPU/GPU-vise. Anyway, the unoptimized template (the marketplace site link) is
very usable running the major platforms/browsers (PC/Mac and IOS mobile devices).
=(we're using not the latest Mac hardware which also runs win-8/10 and IOS for mobile)

Using the optimized template (15robots.com/lss-test), the template runs even smooth on
MS Edge, including steady menubar and parallax scrolling.
MS Edge (MS IE) is not the browser of choice for most the people, it just hasn't the same
market share as the other/s (it is Chrome t.b.h.). We take the numbers via GAnalytics etc.
On mobile devices it's again another story, Android and Apple/Safari is used most often.
=(neither MS Edge-Win8/10 nor MS IE/Edge-WinPhone is used by the majority of users).

Regards, neonoon

ps: What is changed to make it run smooth on MS Edge. Will there be a template update?
jordif replied on at Permalink Reply
jordif
Hi neonoon,

Thanks a lot for taking the time to test the theme and sharing your thoughts.

The optimized version has several changes, mainly:

-> Updated the theme to the latest Bootstrap version.
-> Removed some "expensive" CSS styles, such as CSS transforms and "border-radius".
-> Change the scrollTo script to use requestanimationframe.

Yes, I will update the theme to include the optimizations in the next days / weeks. But probably I will be releasing them one at a time, so I have more control over the changes (I don't want to make so many changes in one single update: if there are issues in one of the sites using the template, or if there are any conflicts with other add-ons, it's much harder to troubleshoot).

But hopefully in a couple of weeks the template will include most, if not all, of the optimizations.

Thanks again for your feedback!

Jordi
NEONOON replied on at Permalink Reply
NEONOON
Is there a chance to get the updated code upfront ..in advance to a later template update?

Regards, NE'NO
jordif replied on at Permalink Reply
jordif
Hi,

I've just sent you a private message.

Jordi
igrieves replied on at Permalink Reply
igrieves
Hi Jordi,

Loaded the new theme - thank you for the instructions - properly idiot proof.

The site is much better thank you. It is still slightly jerky using the navigation in Win10/Edge and also Firefox but as we now have the scroll speed at 800 I think this disguises it to a large extent. Have a look and see:http://www.radiuswebdesign.com

I thought making the scroll speed slower would improve things as there would be less load on the graphics processor but it makes it worse as I found!?

Anyway if there are any more tweaks to make it smoother please let me know otherwise thank you for your help.

Ian
NEONOON replied on at Permalink Reply
NEONOON
Hi Ian, just quickly..

What i recognize (in win10/in edge) is ..the site shines through (one pixel wide?) at the very
bottom of the browser window. That is the case in MS Edge ..not Firefox and Chrome. If
you may "browse" with Chrome, it's actually the best look&feel user experience (on win10).

I'd slow down the scrolling speed (for.. clicking the navigation), to be able to show the
beauty of it (one-page-design) to visitors. That's all from a perpective of me/us, using a
simple and small tablet.

Regards, NEONOON

concrete5 Environment Information

Win 10

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/601.1.56 (KHTML, like Gecko) Version/9.0 Safari/601.1.56

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.