Sticky header flickers

Hi there,

The transition to the sticky header in the woodmart theme is not very smooth. Try scrolling the page and you see an unwanted stretch/change in the height of the header and the size of the menu and the logo which is not very beautiful. On Safari it also flashes sometimes.

How can I make it more stable like the one you see on this site:

https://www.sitepoint.com/premium/l/sitepoint-premium-siteground?utm_source=sitepoint&utm_medium=hometile&utm_campaign=siteground

Thanks a lot,

Hello,

You can remove this height change setting equals header height and sticky header height in Theme Settings -> Header -> Layout. Could you please provide us your website link so we can check how it works for you?

Regards

Thanks a lot,

Here is the link to my website: http://tennisfa.com/shop

As I mentioned the transition between the real header and the sticky one is not very smooth, especially on Safari. I suppose it can be improved.

Thanks a lot

You need to set the same height for default and sticky headers in Theme Settings -> Header -> Layout. Also, remove the sticky logo image if it is the same as default.

Thanks for you reply.

I did that, but it still flashes on Safari while scrolling. It just doesn’t behave solidly

I added this snippet of CSS code and it seems it has solved the problem. I just hope it has not created problems somewhere else.

.enable-sticky-header.woodmart-top-bar-on .header-sticky-real.act-scroll {
        transform: translateZ(0);
    -webkit-transform: translateZ(0);

}

As I expected the fix I provided above had a side effect. Please find the attached file to see what the problem is; It happens on Firefox.

Attachments:

You must be logged in to view attached files.

Your help is appreciated.

Hello,

Sorry for the delay, we analyzed the problem but it seems to be a problem with Safari browser. It doesn’t work very smoothly on your example as well https://gyazo.com/5cf389c69d20fc67cbcb321af76b1ff0
Unfortunately, there is no CSS fix for this problem.

Regards

Thanks for your reply

There seems to be a fix for that, it’s known issue on Safari. You can solve the issue just by adding transform: translateZ(0) to the fixed element, but the problem is we have another fixed element inside the header: woodmart-search-wrapper which conflicts with that fix on Firefox.

Yes, we know that fix. But as you can see, it breaks other functionalities in the header. If you want, we can hide the search in the sticky header for you.

It’s weird, the sticky header on Xtemos website (the one right above this page) acts very smoothly in Safari, but just check the one on this page: https://woodmart.xtemos.com/shop/other/sport/consectetur-adipiscing-elit/demo/sport/
It flickers and is totally inconsistent.

Try to set simplified header layout on your website in Theme Settings -> Header -> header layout.

I suppose there should be a workaround. I’m just trying to find it.

Can we just put that search wrapper somewhere else outside the header tag?

Try to set simplified header layout on your website in Theme Settings -> Header -> header layout.

Did that, but no luck.

Could you please provide us your admin access so we can try to set this kind of header?

Sure, please check the private content. But I think it’s a general problem which you can see on your demo site too.

As we can see, you have disabled the top bar and so the header should work smoother now https://gyazo.com/e1bd8cb1b90d34225ccf962cae0f62f9

I’m afraid it doesn’t work any smoother.

But we checked on safari and it works well for us. Did you see our screen shot? Can you record some video so we can see how it works on your computer?

I didn’t manage to do it with Gyazo, but I record some video via my phone.

Please check it here:

https://youtu.be/bTOEkmVAmyw.

I should also mention that I’m most likely going to use the topbar, I just removed it to diagnose the problem.

Please also check the sticky nav on my main site here: tennisfa.com and see the difference.

The example you sent has an absolutely different kind of header and you can’t compare them. It has a small lag too but it is a bit different than your website. There is little lag on our xtemos website too https://gyazo.com/23642e9ebbee4b0e3a534c0336ba93d3
So almost all fixed elements have kind of flickering when you scroll them in safari browser and there are a lot of articles and questions on StackOverflow about this issue and the only one way to prevent this is to use the code snippet you tried initially. But this snippet breaks other functionality like search full screen. So if you want to make it look perfect on safari then you will need to move the search form in some other place.

I don’t see any lags on my main website’s nav. I added a logo to my navigation (main site) and nothing changed; still consistent. I don’t know why you say we can’t compare the two headers! The interesting point is that the above fix has not been used on the nav of the main site.

I also found this sticky header: http://www.javascriptkit.com/dhtmltutors/stickyheaderdemo.htm
This one also works flawlessly without using that fix.

Guys, I don’t want to be picky, I really love your theme and I’m sure sooner or later it will be the best selling woocommerce theme on TF, but at the same time I expect you to care about your customers’ requests. There are some minor issues with your theme that I believe you can easily fix, but instead you try to deny them.

I’m really at a loss to know how you can be happy with the performance of fixed elements on this page:
https://woodmart.xtemos.com/shop/other/sport/fauris-slandit-fliquet/demo/sport/

Best Regards

Hello,

You understand us wrong, we don’t deny the fact is that the header is a bit laggy and of course we want to do our best to help you and no simply ignore your request. Believe me that we have spent hours to find the solution to this problem and already tried all the things that we may know to fix it. Unfortunately, all HTML elements that get position: fixed; on browser scroll in Safari are lagged. Some of them may be a bit laggy other is more. The second example may look smoother because the page with this element is empty and the browser renders it much faster.

It is too late now, we will try to research this bug more tomorrow. If you will have other examples that have similar header to our theme, please, send them so they may help us to find the fix.

Kind Regards

Thanks a lot, I really appreciate it.

We have added a fix for you. Could you please check how it works now?

I’m afraid I didn’t notice any improvement. There’s still a lot of blinking. 🙁
Are you sure you’ve worked on this header?
http://tennisfa.com/shop

Regards,

Yes, we worked on that header. Could you please record a video how it works now? And please clear the browser cache.

We noticed that you are in Theme Settings at the moment. Could you please replace the code in Theme Settings with this

.main-header {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
   -webkit-perspective: 800px;
   -webkit-backface-visibility: hidden;
}

.main-header.act-scroll {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);    
}

.woodmart-search-full-screen .woodmart-search-wrapper {
   height: calc(100vh - 80px);
   opacity:0;
   pointer-events: none;
   transition: all .3s ease;
   -webkit-transition: all .3s ease;
}

.woodmart-search-full-screen .search-overlap {
   opacity:1;
   pointer-events: unset;
}

[Author]

Posts