Strange Browser Behaviour defying the CSS Hierarchy

user_15502921 0
Viewed 47

I have a very odd instance in that my main Google Chrome browser is prioritising the wrong css.

I am using WordPress with Elementor and Astra on a Siteground Server. I have tried clearing both the browser cache, server cache etc...I even tried clearing Google Chrome cache via the settings.

The issue only happens on this Google Chrome Setup, works on another Chrome instance (including Incognito) and for Firefox and Edge etc.

This is the code that should be working

.elementor-button-wrapper .elementor-button:hover, .elementor-button-wrapper .elementor-button:focus {
    color: #ffffff;
    background-color: #062950;
    border-color: #062950;
}

And this is the fallback style it is using:

.wp-block-button .wp-block-button__link, .elementor-button-wrapper .elementor-button, .elementor-button-wrapper .elementor-button:visited {
    color: #062950;
}

The above code actually has a strikeout on it in the inspector but the right code is used when I tick to disable this code.

I have had this issue on Cloudways before when Varnish caching was being used.

Does anybody know off the top of their head what it could be and whether there is an underground way of purging the entire Google Chrome cache for a specific site? Many thanks!

wordpress caching css
1 Answers

So I found the problem which was really rather simple and probably so simple I didn't think to look.

The style was active for that element but crossed out in the Google Chrome inspector. It was bewildering why unticking an overridden style would fix the issue. The reason was that part of that style rule included the :visited (but it was classed as an inactive element).

Simply put, the browser history was the reason and I had to create an additional style to to offset the visited link from taking preference. I hadn't even considered whether the link was visited or not.

.wp-block-button .wp-block-button__link, .elementor-button-wrapper .elementor-button, .elementor-button-wrapper .elementor-button:visited {
    color: #062950;
}

Example, it was the .elementor-button:visited that was creating this mess, and I was only look at .elementor-button-wrapper .elementor-button which was the active element.

I don't know if this will help anybody but considering other states beyond :hover is important when debugging odd issues like this!

user_155029210
Related