Helix Ultimate 2 Sticky Header Browser Resize Bug - Question | JoomShaper

Helix Ultimate 2 Sticky Header Browser Resize Bug

MD

MW Dev

Helix Framework 2 years ago

Hello,

When resizing a browser (any of them) with the sticky header setting enabled there is a near seizure inducing screen shake. Sometimes, when the issue is occuring it also prevents the browser from scrolling. Note, this does not appear to occur with pre-defined headers.

I am using a custom header with the "sticky-header" settings enabled in template config. There's no other customization to JS files on our part. We use custom header as the pre-defined offer no options to resize grids for responsive.

I've added a link to a video in the hidden content.

0
6 Answers
Toufiq
Toufiq
Accepted Answer
Senior Staff 2 years ago #35827

Hi there,

Thanks for contacting us. Sorry for the inconvenience. Please check with real time device and let me know.

-Thanks

0
MD
MW Dev
Accepted Answer
2 years ago #35859

Hi Toufiq,

Thanks for the reply. I have placed the URL in hidden content. I am not sure what you mean by "check with real time device." I am checking on a desktop Mac in Firefox, Safari, Chrome, and Edge. The video I posted is from macOS' native screen record function.

Note: Please make sure to "scroll down" to activate the sticky header. The issue does not occur on first load - only after scrolling down past the sticky activation offset.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 2 years ago #35962

I want to request you to check this issue on your tablet device or mobile device. Thanks

0
Pavel
Pavel
Accepted Answer
2 years ago #35976

Hi. The cause of the problem is CSS animation that is applied to the Header. Not too successful developer solutions. This code solves the problem.

#sp-header {
    animation: none !important;
}

Note for Team: Guys, this animation should be removed from HU template at all. It is absolutely not suitable for use. We have to add this dropping code each time on each new website with HU 2. I wrote about it even at the stage of alpha beta testing. But the developers did not hear me.

If there is a need somthing using as animation there, it's better transform and transition, but not animation.

Because when using animation, the Header begins to flicker when scrolling, on the pages of many third-party components with which you have not been tested it.

0
MD
MW Dev
Accepted Answer
2 years ago #36028

Toufiq,

Please be advised that the issue I posted about is regarding resizing the browser on a desktop PC and the sticky header (once-activated) causes a wild jumping of the screen. That said:

  1. I do not understand why you are asking me to test on a mobile device. As you are aware I am sure - you cannot resize a mobile browser on a phone or tablet. They are full screen. The issue again is when you resize a browser.

  2. Did you view the video I attached in the first post? It's rather clear.

  3. In addition to this issue specific to desktop, there is also stange behavior on mobile device. If you scroll too quickly then the sticky header sometimes does not activate or activates with partial transparency or gets hung as well. On mobile if you scroll very slow - then it works ok. The issues other customers have recently posted about the partial load / slow load or transparent load I am experiencing too.

Thanks

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 2 years ago #36174

Allow more time. I need to forward our developer team. Thanks

0