Home › Forums › WoodMart support forum › Sticky header flickers

Sticky header flickers

Viewing 30 posts - 1 through 30 (of 40 total)
1 2
  • Author
    Posts
  • December 14, 2017 at 8:43 pm #28979

    MoeMauphie
    Participant

    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,

    December 15, 2017 at 7:13 am #29022

    Artem Temos
    Keymaster

    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

    December 15, 2017 at 9:11 am #29055

    MoeMauphie
    Participant

    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

    December 15, 2017 at 9:12 am #29056

    Artem Temos
    Keymaster

    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.

    December 15, 2017 at 7:41 pm #29169

    MoeMauphie
    Participant

    Thanks for you reply.

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

    December 15, 2017 at 8:32 pm #29177

    MoeMauphie
    Participant

    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);

}
    December 15, 2017 at 11:38 pm #29197

    MoeMauphie
    Participant

    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.
    December 16, 2017 at 11:50 am #29240

    MoeMauphie
    Participant

    Your help is appreciated.

    December 16, 2017 at 1:35 pm #29244

    Artem Temos
    Keymaster

    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

    December 16, 2017 at 2:00 pm #29254

    MoeMauphie
    Participant

    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.

    December 16, 2017 at 2:02 pm #29255

    Artem Temos
    Keymaster

    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.

    December 16, 2017 at 2:04 pm #29256

    MoeMauphie
    Participant

    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.

    December 16, 2017 at 2:06 pm #29257

    Artem Temos
    Keymaster

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

    December 16, 2017 at 2:08 pm #29258

    MoeMauphie
    Participant

    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?

    December 16, 2017 at 2:11 pm #29259

    MoeMauphie
    Participant

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

    Did that, but no luck.

    December 16, 2017 at 3:53 pm #29261

    Artem Temos
    Keymaster

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

    December 16, 2017 at 4:45 pm #29269

    MoeMauphie
    Participant

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

    December 16, 2017 at 7:09 pm #29275

    Artem Temos
    Keymaster

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

    December 16, 2017 at 7:43 pm #29276

    MoeMauphie
    Participant

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

    December 16, 2017 at 7:52 pm #29277

    Artem Temos
    Keymaster

    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?

    December 16, 2017 at 8:52 pm #29278

    MoeMauphie
    Participant

    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.

    December 16, 2017 at 8:58 pm #29280

    MoeMauphie
    Participant

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

    December 16, 2017 at 10:02 pm #29283

    Artem Temos
    Keymaster

    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.

    December 17, 2017 at 7:23 pm #29370

    MoeMauphie
    Participant

    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

    December 17, 2017 at 7:41 pm #29372

    Artem Temos
    Keymaster

    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

    December 17, 2017 at 9:16 pm #29379

    MoeMauphie
    Participant

    Thanks a lot, I really appreciate it.

    December 18, 2017 at 7:22 am #29397

    Artem Temos
    Keymaster

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

    December 18, 2017 at 10:32 am #29462

    MoeMauphie
    Participant

    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,

    December 18, 2017 at 10:34 am #29463

    Artem Temos
    Keymaster

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

    December 18, 2017 at 10:50 am #29467

    Artem Temos
    Keymaster

    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
Viewing 30 posts - 1 through 30 (of 40 total)
1 2