NO BUG: Class not being correctly loaded on one page in a template used on many pages

[simon]

Browser: Any
OS: macOS
URL: Recent sermons – Otter Vale Mission Community

Just upgraded to v2.0 rc on a staging site and noticed one page on the entire site where the banner is broken.

If you take a look at the URL above you’ll see that the banner is greatly extended in height with the following section (black text) incorrectly displayed in the bottom of the banner and the white banner text no longer vertically centred. If you go to any other page under Ministry in the header menu you’ll see the correct banner display.

The strange thing is that the same template is being used to render the banner on these pages. Inspecting a correct banner (first div in main) you’ll see this:

Inspecting the incorrect banner you’ll see this:

So you can see that the main o-banner class styling (with position, padding and justification) is not being loaded.

In the backend the display is correct as it is when I launch to the frontend but not when navigating to the page outside of Bricks.

I tried removing and then readding the template but this made no difference.

[Matej]

Hi @simon,

there seems to be some broken CSS styles (https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fstaging2.ottervalechurches.org%2Fministry%2Fsermons%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en)

It’s likely that you have some class or variable with an invalid character - or maybe it’s a name, just a dot. Or some custom CSS. It’s hard to say what exactly would be the case here, so I suggest:

• Disable all plugins, especially the optimization and performance ones.
• Disable all templates, and see if it’s working then
• Remove elements one by one and check if it starts working.

Now, I would say that by that point, you should figure out what is causing the issue. If not, can you send temporary login credentials to your test/staging website (so that I can easily remove elements and change CSS) and a link to this topic to help@bricksbuilder.io using the email address you used during the purchase, so we can take a look?

Thank you,
Matej

[simon]

Hi @Matej,

I’ve removed the errors with the exception of these two:

75		Parse Error (selector(:focus-visible)) { body.bricks-is-frontend :focus { outline-style: solid; outline-color: var(–focus-colour); outline-width: var(–focus-width); outline-offset: var(–focus-offset); } }
627		Parse Error selector(:focus-visible) { body.bricks-is-frontend :focus {outline: var(–focus-width) solid var(–focus-colour); }}

The one on line 75 is using my custom css (in appearance > Theme file editor) as follows:

/* If focus-visible is not supported in a browser */
@supports not (selector(:focus-visible)) {
body.bricks-is-frontend :focus {
outline-style: solid;
outline-color: var(–focus-colour);
outline-width: var(–focus-width);
outline-offset: var(–focus-offset);
}
}

This syntax is correct I think?

The one on line 627 is because I have this defined in the theme styles > typography > miscellaneous > focus outline:

var(–focus-width) solid var(–focus-colour)

Does Bricks not support this? It all works OK in the website.

Despite all of this the issue with the broken banner still exists. I’ll send over the login details.

Many thanks.

[simon]

Login details sent. Once in, the page is called Sermons.

This page also has the issue with the corrupt svgs on the audio elements.

[timmse]

Hi Simon,

@simon

@supports not (selector(:focus-visible)) { …

@supports only checks for support of CSS properties and values, not selectors, so this approach won’t work.

This should do the job:

/* Fallback: apply focus styles to all focusable elements */
body.bricks-is-frontend :focus {
	outline-style: solid;
	outline-color: var(--focus-colour);
	outline-width: var(--focus-width);
	outline-offset: var(--focus-offset);
}

/* If :focus-visible is supported, remove fallback for mouse users */
body.bricks-is-frontend :focus:not(:focus-visible) {
	outline: none;
}

Due to this report, I edited my initial reply.

Regarding the banner, it appears to have been a minification, combining, or caching issue. I disabled Litespeed CSS combining, cleared the cache, regenerated the styles, reactivated the setting, cleared the cache again, and now everything seems to be fine again. Can you confirm?

[simon]

Hi Stefan,

It looks fine thanks. Not sure why only one page would be affected, the cache was off. I’ll reload the staging site again and see what happens and then apply this fix if necessary.

[timmse]

Unfortunately, I don’t know either If it happens again, disable the CSS minification and combine settings, and clear the cache. Then, it should work again.