First CSS rule not loading into browser

Loops & Logic
#1

Hi, I have encountered a bizarre issue where the first CSS rule in a style sheet is not loading into the browser. All rules after the first load normally.

I have been having this issue for a few days, and recreating the style sheet does not fix it.

For example, the rule sim-intro below does not load here:
https://simplicitytheme.com/

If I move the same CSS into the WordPress Customizer, it loads normally. I have attached an export of the Tangible style sheet if useful.

What could cause this unusual behaviour? Thanks.

/* Typography - Intro */
.sim-intro {
    width: 800px;
    padding: 10px;
    margin: auto;
}
.sim-intro p {
    font-size: 1rem;
    line-height: 1.8;
    text-align: center;
}
@media only screen and (min-width: 769px) {
    .sim-intro p {
        font-size: 1.5rem;
    }
}
Box-shadow in image disappears on the LEFT SIDE
#2

Hmm, that’s odd. Does this behaviour happen on a fresh WP install for you? I just tried it on my end and the sim-intro rule seems to be showing up as I’d expect.

Edit: one of my colleagues was able to replicate this so I’ll have them report the bug and we’ll check back in here with an update.

#3

Thanks for that. I do seem to find obscure bugs. The workaround is to simply add another rule to the top of the sheet.

#4

Hi,
Just commenting here to say that I have the same issue on my last template. I don’t remember encountering this in previous templates, and I didn’t check if after this occurrence, my previous templates are also affected or not, but I could if that helps.

1 Like
#5

Hi,
I also encountered similar issue last night and I was thinking it to be on behalf of my part and after seeing this thread I think this is a bug that requires fixing. Thanks

Update: when i tried putting .bugfix {} as first css style rule, it ignored first rule as well as 2nd rule so there after I tried putting .bugfix { disply: none; } same element with some property then it ignored the first rule and loaded second rule. It may help finding bug.

#6

Hey @zakir786lrk, @Adrien_C, and @Rips, I fumbled handing this bug report off to the dev team and it looks like we don’t currently have an example of this bug in action that we’re able to troubleshoot from. I’m still not able to replicate this myself so I’m reaching back out in this thread to see if you can help me get an example of this issue that I can replicate and send to the devs. Would you mind posting your template and CSS here so that we might be able to use that to help replicate this bug? If you could simplify it down to the smallest possible template/CSS that still causes the bug for you, that would help us troubleshoot the root cause faster.

If any of you have time to answer some other questions that might help me be able to replicate this on my end, here are some other questions that would help us get to the bottom of this:

  1. Does this happen on all templates or only some?
  2. If it only happens on some templates, are you able to identify what’s different between the templates that work and the templates that skip the first CSS rule?
  3. If it happens on all templates, can you try disabling other plugins to identify whether this is a conflict with a third-party plugin or not?
  4. If it’s not being caused by a plugin conflict, could you clarify who your host is or what software you’re using to build your site if it’s a local installation?
#7

Here you go.

  1. It happens on only some templates.
  2. I tried removing little by little style and found that in my case if css has content: "\2713"; (content css property with slash) then the first style doesnt load in browser. I tried putting this code in some other template and it also skipped first css rule.
3 Likes
#8

We’ve found the source of the issue and will be releasing a fix soon!
Thanks to everyone for reporting this and helping us troubleshoot :slight_smile:

4 Likes