Helix Ultimate 2 Sticky Header Browser Resize Bug - Forum | JoomShaper
Staff replied Helix Framework

Helix Ultimate 2 Sticky Header Browser Resize Bug

Asked by MW Dev 5 years ago Last activity 5 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.

6 replies

Toufiq Senior Staff

Hi there,

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

-Thanks

MW Dev Asked this

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.

Toufiq Senior Staff

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

Pavel
5 years ago · edited

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.

MW Dev Asked this

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

Toufiq Senior Staff

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

Log in to reply.