White flicker appearing for a second on header area in trade theme.

[Redeyemerch]

There is a white flicker whenever i refresh or open my web url. in my header area. im using trade theme. i tried rebuilding my entire web in other themes but faced the same issue but this time in different area like home or something. im using a gradient bg for my entire site. https://www.redeyemerch.in/

[Redeyemerch]

https://www.redeyemerch.in/

[Redeyemerch]

oops sorry for that... https://www.redeyemerch.in/

[gnicko]

Doesn't seem to be an image... check the CSS.

[Redeyemerch]

Thanks for your reply. I don't use any images for gradiant background for my web I created it by using the colour palate give in theme settings. I don't use any plugins or stuffs i tried changing code for the "Powered By Shopify" thing that's it and I'm a beginner just now created my web requesting you to please help me with this 

[Redeyemerch]

How to check css for any animation transition?

[Redeyemerch]

Thanks for your reply. I don't use any images for gradiant background for
my web I created it by using the colour palate give in theme settings. I
don't use any plugins or stuffs i tried changing code for the "Powered By
Shopify" thing that's it and I'm a beginner just now created my web
requesting you to please help me with this

[gnicko]

The header is loading just a fraction of a second before the CSS styles from "theme.css" can be applied. One way to fix this is to move or copy the affected styles from the "theme.css" file to the header HTML and hard-code the styles in place. There are more elegant ways to do this, but I'm not sure that Shopify is capable of implementing them.

You might see the necessary improvement by copying the background gradient style to the header container and include it using the style="" attribute something like this:

<sticky-header data-sticky-type="reduce-logo-size" class="header-wrapper color-scheme-5 gradient header-wrapper--border-bottom" style="background: radial-gradient(rgba(255, 0, 28, 1) 27%, rgba(93, 0, 9, 1) 91%);">  

...so that the background styles load along with the HTML.   Then the rest of your CSS styles can load slightly after.

Here's some stuff to read:
https://web.dev/articles/extract-critical-css
https://web.dev/articles/critical-rendering-path/render-blocking-css

[Redeyemerch]

I definitely don't understand any of this never know this is this complicated anyways is there any specific video tutorial where I can just copy the steps to clear this out. But really thanks for your efforts mate

[gnicko]

I don't think you'll find a video... maybe.

What's happening is Shopify allows the page to load before all of the styles and so forth finish loading. It's designed this way to make the page load seem faster to your site visitors. Unfortunately, some of the style settings not loading make a white flash appear.

You need to open up the code editor and find the template file that "creates" the header. When you find the "<sticky-header..." tag, add the style information. Much like what I included above.

I can't really give you more specific instructions because I don't know the theme you're using or which files are which in your store. You should be able to find it if you look around a little bit. In the store I'm currently working on, the file to edit is called "header.liquid". In your theme it might be the same, it might be slightly different. You'll have to inspect them.

[Redeyemerch]

Alright I can understand it a bit so i just have to find the line of code which has the "<sticky-header" and i should paste the one you sent on the above text right? Will that be enough or i should look into it more ? 

[gnicko]

Yes. Try pasting in just

 style="background: radial-gradient(rgba(255, 0, 28, 1) 27%, rgba(93, 0, 9, 1) 91%); background-attachment: fixed;"

 right before the closing angle (">").  Just like in the post above. Try not to disturb any of the other code.

That may be enough to fix the problem for you.

[Redeyemerch]

 Am i seeing the correct one ?

[gnicko]

Maybe.... that's not the right part of the file if it is tho.

You literally want to find "<sticky-header" in there....

Also: Added "background-attachment: fixed;" to the style definition above...

[Redeyemerch]

i tried this by finding the part and pasting style but it fixed the header area and now my entire web other than my header got flicked while refreshing. i tried practicing it in a copy version

[gnicko]

I tried it on my end, and it worked well. You must have interfered with some of the existing code inside the tag. Check again that you're inserting the style element without disrupting what's already there. Essentially, we're not changing anything here, just providing a small bit of style instructions before it loads with the "regular" CSS file. If done successfully, nothing should change except the white flash will go away.   

I suppose there could be a greater issue somewhere with how your theme is constructed. If you can't get this approach to work for you, maybe you should contact the theme vendor and ask them to troubleshoot the problem.