#collapse #expand #viewportenter #viewportleave #header #browser_display
For almost a year I’m using a transparent box as a trigger to collapse part of the header, using ViewportEnter and ViewportLeave.
In more than one site.
A severe problem appears lately and here is an example in one of the sites.
I’ve checked the code and re-positioned the box and it looks fine in the editors’ preview mode.
when scrolling up and down there is a point where the header starts flickering between it’s two states.
This happens on Firefox and Chrome.
It does not happen on Edge and Opera.
Same page scrolling on different browsers
http://www.screencast.com/t/W671hNLSZPF4
(First- firefox, second - edge, then opera and last is chrome)
This is the page:
https://www.chagim.org.il/tubeshvat
Please check this problem not in the editor preview
Thanks
Tamara
I had a similar problem like this. I solved it by changing the viewing zoom % for my browser.
I know it has some influence, but I’ve checked this specific problem with 100% on all browsers…
changing the zoom did not help when I’ve played with it.
Anyway, I cant tell people to change the view especially for the site…
Please, can anyone help with this problem?
I’ve tried to move the trigger box within layers and positions, but all the same.
General support sent me to the code forum, but no one here reacted.
This is a very big online site and the header flickering is a huge problem.
Have to tried add in a 1 second delay to the trigger box activating ?
setTimeout(() => {
//code here for trigger box activating
}, 1000)
also maybe worth coding to hide or disable the 1st trigger box on viewport enter to the second trigger box and to show or enable the 1st trigger box on viewport exit from the 2nd trigger box
@mikemoynihan99 thanks. A delay is not relevant in this case, but I will think of two boxes. On the other hand - why is it working well on some browsers and on preview mode? it seems to be a bug.