Parallax jitters... or not?


#1

It seems to be a new issue I've met during development.
I've tested the site in different browsers from my work station, it is okay. But several people reported that there are jitters and lags while scrolling the page. And these jitters much more significant in Google Chrome, and less in Firefox and Opera.
Could you test is it a significant or acceptable on your PC or notebook?
Thanx.


Parallax design and usability
#2

Sorry spent 10 minutes clicking the scroll down button but couldn't find out how to scroll :slight_smile:

You disabled the mouse wheel and keyboard so I just gave up.

EDIT:

Ok just realised that I had to click the image in the middle to get the scroll working. That's not something I would have thought of unfortunately. The bouncing scroll indicator took my full attention.

Now that the page scrolls then yes it does seem a bit jumpy and I would guess its one of the scripts that you have employed for the task so really is a question for the JS forum I think. I often see these scrolling or parallax pages jumping/stuttering which is why they have to be done carefully and usually on pages with light content and no heavy dependencies on scripts or heavy images etc.


#3

many thanks for checking.
About scroll issue - i've never heard about such issue. Have checked in many browsers - scrolling is okay. What browser do u use? And are there some JS blocking plugins such NoScript, etc?

EDIT:
As I understood you have used 2560x1080 display, is it right? I've never tested breakpoint for this resolution, could u upload a screenshot of main page? Thanx.


#4

Hi there b3rsus,

and a warm welcome to these forums. :winky:

Unfortunately, your site seems to rely totally on "JavaScript". :eek:

This is how your page appears to me...

You have totally ignored the prime purpose of a website - content. :wonky:

coothead


#5

PC: Chrome, Firefox, Edge and IE11 (latest versions)
Mac: Chrome Firefox & Safari (latest versions)
iOS: Safari

The scroll is jittery on all my browsers and systems and not smooth at all. Chrome on the mac seems to occasionally freeze when I resized the browser window. resizing the window in all browsers shows a big lag. It has also frozen the tab on Chrome browser on the PC now that I switch back to it.

In Chrome PC and mac the mousewheel will not scroll the page.

In IOS only the first image link scrolls the page. None of the other scroll triggers work.

Whether or not you like parallaxing sites is one thing, but what you can say pretty confidently is that they’re a black hole of performance.

See also here.

My PC has that display but my mac is a 27" imac. However it makes no difference as I never have my browser maximised. Assuming a user's browser width is the same as their viewing device width is nonsense.

I think you need a JS expert to diagnose the bottlenecks in the page as there are too many scripts for my limited js knowledge to look through.


#6

I really should be replying to the OP, but your post is most relevant.

I had no idea there was a scroll until I read your comment. Once I clicked the image it scrolled to the light bulb.

However, @b3rsus, I couldn't scroll at all afterwards. I'm using a smartphone. Another issue is I couldn't back out of the pages.

I am a firm believer of testing. One of the things I do when adding content, editing pages, or making any changes to my code is test in all browsers. Additionally, knowing this world has become more mobile, I test in a variety of smartphones.

I use a cheap service from Wal-Mart, my phones are also cheap...and old. This allows me to test my pages on a plethora of screen sizes from 300px to my 36" LCD screen.

I'm not saying to buy cheap phones to test, but at least pull out your smartphone to check your pages. It covers your bases for some mobile users.


#7

Yes I mentioned that in IOS so your comment confirms it .:slight_smile:


#8

I guess I should've mentioned Android as my platform, but guess it really doesn't matter.

When I first started web development, I had (and still am) learning about different browsers and their reactions to the same code. A lot of it is what my schools should have taught me. I was surprised to learn that, although Chrome, Firefox, and Opera were similar in design (Gecko-like), they each displayed my content differently.

It's been 3 years since, so I really don't know what's changed.

It's really sad that I learned more about web development on my own than tens of thousands of dollars I spent in higher education.


#9

Really many thanx to you guys for testing!
Before publishing this version of the site, i've tested it on several iphones, androids, ipad, laptops and PC on Chrome, Safari and Firefox.
Except the fixed breakpoints (it is not possible to create 100% height first screen with the cosmic guy alligned to the lower edge), I was really satisfied. But for now for example many ppl report glitches with scroll. I'm really surprised=) Probably the anchor scrolling script works not well.

Could you test another test versions:
https://bersusdesign.com/test/v1/ - without any scroll scripts
https://bersusdesign.com/test/v2/ - with scroll smoothing script

What version in your opinion works better?
Thanks.


#10

hmmm... what a great design! =)


#11

Okay, I saw no difference between the 2. Both scrolled lovely on my...dare I say it? Luna J3 Pro. My resolution is 360x640.

One "issue" I have is I can hold/swipe left-right and I get an extra bit of space.

This does not happen with other sites. The only difference between sites is the closing tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

The "/" really shouldn't matter, right?

What I did was add "view-source:" in my mobile browser to look at your source code. I copied that line and searched, w3schools was the first option. Their code was <meta name="viewport" content="width=device-width, initial-scale=1.0">
I had no extra space in w3 pages.

Now, I been out of the game for a couple years, but from what I understand, tags like this shouldn't make a difference if it has the / with it or not.

Correct?

Otherwise, both performed much better than before, with no dissimilar performance.


#12

Rebuilt the main version: bersusdesign.com

About horizontal scroll - there are fixed breakpoints on 320 and 375, so I think everything should be fine, please check.

And how's about performance on PC? As I believe it should be more pretty smooth scrolling rather with anchor scrolling scripts.


#13

They are both better than the previous version and scroll more smoothly on Chrome PC. Can't really tell which is best as they behave similarly.


#14

Strictly speaking, the trailing slash on self-closing elements should be omitted in html5. But browsers will just ignore it, I can't imagine this is the cause of any problem.


#15

I had a look at the w3c documentation and it seems safe either way. (i.e. "may", "no effect")

https://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#start-tags

Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.


#16

Yet another example of the spec now saying "wot-eva!" :grimacing:


#17

@SamA74, @Mittineague,

I was looking for it before I asked and saw conflicting information about it. Something about XML and whatnot.

I don't even have time to work on my own website with the stuff they have me working on in school.

The only thing I managed to do was create a few pages to prank my Uber and Lyft driver's Facebook group by modifying Yahoo's page, eliminating all but one article, changing the image and content, and disabling all links except for the article.

Once they clicked the article, the page opened to an article written by April F. Day for 3 seconds, then redirected to a dancing stick figure letting them know they got pranked, and even had a counter to let me know how many I suckered.


#18

The conflicting information is most likely because you didn't make the connection to what DOCTYPE the specs were referring to. For XML and XHTML void (self-closing) tags must have the solidus (forward slash). But with HTML5 it seems in a lot of ways "anything goes" (as SamA74 posted "wot-eva").

Personally, I prefer the strictness. What some may see as "more freedom" I see as "sloppiness allowed".


#19

I noticed the jitters / delay in scrolling on chrome. It is a bit intrusive and strange from a viewers perspective.


#20

I tested your site on my PC and the current version is better but still the site is pretty heavy on resources so I may expect people with old hardware to have bad experience with it. For me scrolling is a bit slow in Chrome and better/acceptable in Firefox. Overall I find Firefox to be better optimized for scrolling and parallax effects. IE and Edge are also fast but there the parallax is broken altogether, the elements move in a nonsynchronous way with some nasty jumps and jitters.

Another problem which is not so apparent is that your site eats up my cpu resources even if it does nothing - just loading the site and allowing it to sit there without any movements causes the browser to consume about 8 to 12 % of my cpu - this happens in all browsers. Fortunately, it doesn't do that when minimized but still there's something in the scripts that is not optimized and some unnecessary work is being done constantly.