NO BUG: Header: Slide up after (px) + mini cart creates a gap

Bugs
1

Browser: Chrome 114
OS: Windows
URL: test – Try Bricks – t7b3ff1b

Hi team,

When I put the Mini cart widget in the header and set the Slide up after (px) option in the header settings, there is a small problem in the front-end while scrolling.

When we scroll up, there is a gap (1px) between the header and the top of the browser, which I hope you can understand in the video below (I point to it with the mouse).

Please note that in order to reproduce this bug, the following two things must be executed.

1- Use the Mini cart widget in the header.
2- In the header settings, set the Slide up after (px) option. For example, on 200

3

Hi Hosein,
Thanks for your report - but what do I need to do to see the problem on your page?

The top position is 0, and I can’t see any gap.

4

Hi @timmse,

I really don’t know why. But if you scroll the page a few times, you will definitely come across it. Please note that this interval will be visible when you scroll up the page.

I looked into this further. This bug seems to occur when:

1- Mini cart widget should be present in the header.
2- In the header settings, we have used Scrolling box shadow.

5

Hey,
You have no scrolling box shadow in your example link.
If you report problems and provide a link, please ensure the problem can be seen.

The box shadow is removed when the header slides up, so it may not be visible at all.

6

Hi again @timmse,

I apologize. I had to disable the Box shadow due to bug reproduction. Available now. Please check again.

7

Hey, sorry, but I still can’t see the problem. The scrolling box shadow is removed immediately when scrolling up and is, therefore, no longer visible.

The default transform of the header is -101%. You can increase it and see if it solves your problem:

#brx-header.sticky.slide-up {
  transform: translateY(-105%);
}
8

thank you @timmse,

I set it to -100% and the problem was solved.

9

That’s funny because it puts it closer to the visible viewport :smiley:
However, I think the issue is very specific and, overall, not a bug.

1 Like
10

Yes, in general it is a special issue. I will look into it further and let you know if I come to a definitive conclusion

11

Hi again @timmse,

I came across something new that might help you track down and fix this problem. I experience this bug only in Chrome browser (Windows). I just tested this in firefox and there were no problems. But I can still reproduce this bug in Chrome browser.