WAIT: Header - Sticky causes page jump

ocbroadband · January 27, 2022, 8:15pm

Bricks Version: 1.3.7 Stable
Browser: Chrome 96.x
OS: Windows 10.x
URL: -

I’m currently using the sticky header, and it appears that the stable version changed the reaction of the sticky header by causing the entire page to shift to the bottom of the header container when you start to scroll. It appears correctly on the backend and functions as expected.

It ‘was’ working on the beta, FYI, and appears to be jumping based on what is in the content area and what is in the header.

Lyle

timmse · January 27, 2022, 8:30pm

Hi Lyle, a live link would be very helpful

ocbroadband · January 27, 2022, 9:06pm

@timmse I’ll send you a link directly. It’s still a dev site so not really wanting to be public.

ocbroadband · February 7, 2022, 3:17pm

Hi @timmse, Any headway or thoughts on this? I have some other ‘suggestions’ for the backend builder part as well for the UI/UX, but the difference between the backend and frontend doesn’t match visually in behavior as a reminder.

timmse · February 7, 2022, 6:32pm

Hi Lyle, sorry for getting back late!
It seems like the calculation of your header height is wrong. At my current viewport width, it should be 232px high, but the position top value is 431px, which is causing the jump.

Can you please send temporary login credentials + a link to this thread to help@bricksbuilder.io?

Best regards,
timmse

ocbroadband · February 17, 2022, 4:32pm

@timmse So, I tried to remove all the customization from the header being sticky, etc. Just vanilla header. Also removed all paddings, margins, etc. as a test. Still jumps. I’ll send you a login PM.

timmse · February 17, 2022, 6:19pm

Hi Lyle, thanks a lot for the login data!

I think I’ve found the problem.
The image was causing the jump in somehow influencing the calculated height. I’ve used the logo element instead, and it works fine.

Best regards,
timmse

ocbroadband · February 17, 2022, 6:38pm

So, I would consider this a bug then, no?

timmse · February 17, 2022, 6:41pm

Well, the problem is solved isn’t it ?
I’ll recheck with the upcoming bricks version - if the problem still exists, I’ll add it to our bug tracker.

ocbroadband · February 17, 2022, 6:48pm

Well, I mean that what if I want to put a ‘image’ into the header that isn’t necessarily the logo. That would potentially cause the same issue, right? So to me, this appears to be a bug.

timmse · February 18, 2022, 1:27pm

I can’t reproduce the problem: https://vimeo.com/678861884/05c49664c9

Until I can do that, I won’t confirm it as a bug. As I said, I don’t currently know what’s causing your problem (you’re the first with this issue) and I’ll recheck with the next version.