Lazy CSS loading

So the problem im describing doesnt occure on localhost but on live website. The only difference is i guide my traffic through cloudflare so i thought it MAY be an issue.

Im experiencing like delayed css styles being applied to one certain element each time i reload page.

 <input class="search" type="search" name="q" placeholder="Search...">

This field is being generated like raw input and in a matter of 0.5 second styles are being applied which cause “blink” effect and is very eye catching. i wanna get rid of that.

here is css:

.nav-top input[type="search"] {
  color: white;
  margin-left: 2%;
  border: 1px solid #161616;
  width: 100%;
  padding: 1.85vh 1.85vh 1.85vh 5.55vh;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  background: url("icons/search.png") no-repeat left;
  background-position: 1.85vh;
  background-size: 2vh;
}
.nav-top input[type="search"]:focus {
  border: 1px solid #303030;
}

P.S deleting “transition: 0.5s;” made no difference.

Do you think its cloudflare dependent? Can i change it?

Hi!

It’s possible you have a relative URL issue. When you define background, you are using a relative URL and Cloudflare usually require entire references. Please, try to config a entire URL on this line into your code and upload it again.

Have a nice day!

Note: relative URL works prefect on localhost.

Hi,
so i changed from

"icons/search.png"

to

"/icons/search.png"

which is full path however problem still occurs :confused:

Hi!

Please, check this info: https://developers.cloudflare.com/ssl/troubleshooting/mixed-content-errors/

I think you can solve your issue with it.

Have a nice day!

Hi, this is not it since im using path to file. my path doesnt contain http or https.
Also i have this problem with elements that are hidden by css (display: none) - after refresh they disappear after second not instantly as they should so its not even only about photos.
Its definetley some delayed css loading idk how to resolve it.