[Jim Goodrich]

Thank you both for looking at this and your suggestions. While none of those were the answer, it made me look in the right places.

I used a sepia filter on the header image link like this:
[css]
.header=image a {
-webkit-filter: sepia(45%);
-ms-filter: sepia(45%);
-moz-filter: sepia(45%);
filter: sepia(45%);
}
[css]

And removed it on hover like this:
[css]
.header=image a:hover {
-webkit-filter: sepia(45%);
-ms-filter: sepia(45%);
-moz-filter: sepia(45%);
filter: sepia(45%);
}
[css]

Somehow the float: left property on .header-image .site-description >a was causing the sepia filter to show on the primary navigation.

I tried multiple combinations to resolve this which didn't fix the issue, so I changed it up and combined two filters like this:

[css]
.title-area a:hover {
-webkit-filter: brightness(93%) saturate(140%);
-ms-filter: brightness(93%) saturate(140%);
-moz-filter: brightness(93%) saturate(140%);
filter: brightness(93%) saturate(140%);
}
[css]

Not exactly the same, but very similar and it resolved the issue. I couldn't watch that issue show itself whenever I looked at the site, even if I was the only one who would see it.

Thank you for you help.

[Jim Goodrich]

I thought of the cached version possibility. I've cleared my browser cache multiple times as well as purging the Cloudflare cache, make sure I'm in Development Mode when working on and have straight up paused the site on Cloudflare in various combinations.

It only happens in Chrome (I'm using Version 58.0.3029.110 (64-bit)). I've checked it in Firefox, Opera, IE and Edge (I got rid of Safari for Windows a long time ago).

If it turns out that I'm the only one who can see the issue, I'll live with that. I'm just a bit more concerned that if I can see it, so can someone else and run the risk fo them leaving the site.

I also see it when I open an incognito window.

[Jim Goodrich]

Here's what I see...

Screenshot of issue via screencast.com

It's not as pronounced in the screenshot as it appears in the browser, but it does show the issue.

[Jim Goodrich]

I was overthinking, looking for the difficult answer with z-index. It ended up being two simple z-index changes. First, cahnge the default z-index to -1 on the sticky message itself

.sticky-message {
	background-color: #d31145;
	font-size: 16px;
	opacity: 0;
	padding-bottom: 20px;
	padding-top: 20px;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: -1;
}

Second, add a z-index of 999 to the sticky-message .reveal:

.sticky-message.reveal {
	opacity: 1;
        z-index: 999;
}

And the primary navigation and responsive menu sits nicely on top and when the sticky message reveals at 100px, its message is on top as well.

[Jim Goodrich]

Thank you, and I agree with your host assessment, I'm a bit mired in the dev area, but not the folks for whom I build sites, hence, the hosting difference.

I just learned of FOUT (the term) today myself... I've also seen FOUC now too, so cheers for acronym vocabulary enhancement. 🙂

[Jim Goodrich]

Thank you for getting back to me. I was working on it most of the day today and wasn't sure at which point, it started showing, so I have no idea what fixed it.

I'm now experiencing a bout of FOUT with Firefox that's been quite disturbing to me. That's why I minified the CSS and tried Total cache, to see if either would resolve it. It may be the version of FF that I have.

 

Thank you for gtetting back to me on this. I really appreciate it.

[Author]

Posts