1215474 - Top bar is lagging while scrolling

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect, P5)

Description

[2ljpswpih]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:44.0) Gecko/20100101 Firefox/44.0
Build ID: 20151014030223

Steps to reproduce:

Go to http://www.erasmus.uz.zgora.pl/rekrutacja/ in Nightly. Scroll down and up.


Actual results:

Top bar is lagging while scrolling


Expected results:

Top bar should behave properly (for example, like in Chrome).

Comment 1

[Ryan VanderMeulen [:RyanVM]]

Reproducible with APZ enabled. Doesn't reproduce if I disable it.

Comment 2

[Kartikaya Gupta (email:[e-mail])]

They are using a scroll listener to move the bar. This is necessarily going to be laggy with APZ enabled; they should switch to using position:sticky to get the desired effect with async scrolling. Moving to TE to reach out to them.

Comment 3

[Hallvord R. M. Steen [:hallvors]]

There is a contact form here: http://www.erasmus.uz.zgora.pl/kontakt/
Would be nice if a Polish person could contact them. We don't have any volunteer from Poland on the web compatibility team at the moment, maybe the reporter could reach out to the site? TIA! :)

Comment 4

[2ljpswpih]

Do I understand it wright? The site administrator doesn't build site properly and they should change something?
When it comes to contact, I don't think that there will be any problem with contacting them in English.
And I don't know what does "TIA" means. ;)

Comment 5

[Hallvord R. M. Steen [:hallvors]]

(In reply to to_du from comment #4)
> Do I understand it wright? The site administrator doesn't build site
> properly and they should change something?

Yes, we suggest this change: instead of moving the top navigation element on every scroll event, set element.style.position='sticky' (and if required element.style.top='0px' or similar to get the effect they want) instead. This way the web browser will keep the element at the top of the screen during scrolling automatically. Scrolling will be a smoother and nicer experience after this change. There's further documentation of position:sticky here:
https://developer.mozilla.org/en-US/docs/Web/CSS/position

(The scroll event based code is still required as a backup since some browsers don't support position:sticky yet)

> When it comes to contact, I don't think that there will be any problem with
> contacting them in English.
> And I don't know what does "TIA" means. ;)

TIA means "Thanks in advance" :)

Can you send them a message, in either English or Polish?

Comment 6

[Hallvord R. M. Steen [:hallvors]]

(To be absolutely clear: what they are doing is not "wrong", it's just less efficient - meaning it will cause more lagging and strange effects during scrolling, especially on phones with less powerful hardware. We'd like to make them aware of a better way to code the effect they want, but it's of course up to them if they will take our advice or not.)

Comment 7

[2ljpswpih]

It will be better if someone from your company can do it. I'm not specialist at this and it would be a little bit strange to me to suggest them better way of building page.

Comment 8

[Karl Dubost💡 :karlcow]

 (In reply to to_du from comment #7)
> It will be better if someone from your company can do it. I'm not specialist
> at this and it would be a little bit strange to me to suggest them better
> way of building page.

to_du: You can help by contacting them. And in your message include the link to this bug report, and tell them for any technical discussions, they can ask here. Thanks a lot already for everything you did.

Comment 9

[2ljpswpih]

Ok, I have contacted them.

Comment 10

[Karl Dubost💡 :karlcow]

The situation has not changed.

<nav style="clear: both; position: absolute; left: 0px; top: 32px;" id="mainnav">
    <ul id="menu-menu-glowne" class="mainmenu">

    <!-- cut menu items -->

    </ul>
</nav>

Replacing position: absolute by position sticky will not help here. It will not have the intended effect. They currently have.

Maybe before contacting, we should really come up with something which is working and which piece of code we need to change.

I'm putting back to needsdiagnosis.

Comment 11

[Karl Dubost💡 :karlcow]

Contact form is http://www.erasmus.uz.zgora.pl/kontakt/
Maybe contacting Tomasz Hebisz [e-mail] could help

Comment 12

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 13

[Karl Dubost💡 :karlcow]

They also needs to remove this

	var topOffset = jQuery('#mainnavcontainer').offset().top-jQuery('.topheader').offset().top; //get the offset top of the element
  	jQuery(window).scroll(function() { //when window is scrolled
	  	iOff = topOffset  - jQuery(window).scrollTop();
	  	if(iOff<0) jQuery('#mainnav').css('top',-iOff);
	  	else jQuery('#mainnav').css('top',0);
  	});

moving to contact ready

Comment 14

[Oana Arbuzov [:oanaarbuzov]]

I can't reproduce this on my side. Top bar is not lagging while scrolling the page up/down.

Tested with:
Browser / Version: Firefox Nightly 101.0a1 (2022-04-05)
Operating System: Windows 10 Pro

Comment 15

[Oana Arbuzov [:oanaarbuzov]]

2ljpswpih can you still reproduce it on your side?