Issues Flatsome Theme Images

please provide the report number , you can get it in toolbox -> report -> click “send to LiteSpeed”

are you referring to LiteSpeed Cache -> CCDN -> Use CDN Mapping ?

@qtwrk shall i generate the report with the cnd setting enabled (images dont work) OR with it disabled (images do work)???

are you referring to LiteSpeed Cache -> CCDN -> Use CDN Mapping ?

Yes thats correct. CDN is turned on but mapping is not setup or configured….

doesn’t matter, any status is okay , please send the report.

@qtwrk NP here you go:

Report number: RMGRVBTO Report date: 09/24/2024 12:27:34

FYI generated with CDN setting enabled (no mapping configured) and it breaks images on frontend as advised…

the CDN URL, without conf , is showing / , this means the resources will try to load by something like /xxx instead of https://domain.com/xxx

you should either properly configure the CDN URL, or turn it off

@qtwrk so theme support have had a further look into this and replied as follows:

When we examined the issue more deeply, we encountered an interesting situation.

We had previously discussed that in Flatsome v3.19.5, banner and section background images were displayed with CSS url(), which changed in v3.19.6. In v3.19.5, background images were hidden with the CSS code “.bg { opacity: 0 }”. This old code has been cached with Litespeed cache’s Critical CSS (<style id=”litespeed-ccss”> tag).

Typically, this Critical CSS should be deleted when selecting the “Litespeed>Purge All” option in the admin toolbar. However, we noticed that this wasn’t the case. It’s only deleted if you do “Purge All” while on the problematic page. So, this issue is neither a theme problem nor a theme-plugin incompatibility. After each update, the generated Critical CSS codes and cache need to be cleared entirely. The “Purge All” option in the admin panel should do this, but this option doesn’t completely delete the generated Critical CSS codes. The Litespeed cache team may look into this issue.

We inspected the code and sure enough the .bg{opacity:0 is what seems to be the issue and it DOES not get flushed (happens on older AND latest versions of the litespeed plugin) thats why background images ont display.

Not entirely sure how to flush the cache per page as there desont seem to be an option so we cannot fully test that. Only test using browser impsectro to disable that css code. FYI its inline styling thats being cached. How do we get around this and get this fixed please?

I’m sorry ? I am getting confused now , are we talking about CDN setting ? what’s with CSS ?

if you don’t configure the CDN URL, you need to keep it OFF

Apologies for any confusion. Allow me to clarify.

PROBLEM: background images do not work on the flatsome theme when litespeed is active. Appending to the URL with: ?LSCWP_CTRL=before_optm to check if litespeed was issue confirmed this.

INITIAL INVESTIGATION: after reaching out to theme support they stated the the CDN setting (turned ON) was the culprit even though NO domain mapping settings were setup. Testing this a few times it appeared that indeed this was the case HOWEVER on a few other sites this setting was actually OFF and the issue was still present. For the site in question we tripple checked and indded even with the CND setting turned OFF the issue existed (even though previously we thought it was fixed! that may have been a fluke).

ADVANCED INVESTIGATION: going back to theme support we advised that it was not due to CDN setting ON as issue still existsed. They took a deeper dive and saw that the previous version of the theme used css code to display an image WITH inline css using bg{opacity:0} to ensure images displayed correctly. In the latest version to improve the theme they removed that css function and displayed images inline. The previous bg{opacity:0} was no longer required and removed BUT even after the theme update and using latest version of litespeed, its still seeing that code and thats why background images dont work (that was the last message we posted with the theme supports reply)

They stated that clearing purge all should remove that inline code and get background images working BUT it doesnt work apart from ONLY when the purge all is doen from the page in question via wp admin (BUT there is NO sperate button from what we can see ONLY main tool bar purge all options).

Thats where we currently are, purge all to remove that redunant NOT used inline css does not work and hence background images do not display.

I hope that clears up any confusion. Was not sure if we should be opening another thread for this….

please go to Toolbox -> Purge -> Purge Unique CSS , then purge all , see how it goes

@qtwrk nope that doesnt work. Issue still exists…

let’s try the old fashion way , go to CSS options , disable them all , purge all

@qtwrk yes that works! but kills page speed ??

now enable them back , one by one , to narrow down which one causes it , then we will see what to do next

@qtwrk so after testing this option: Load CSS Asynchronously seems to be the cuplrit. Turning off background images do not display…

wait , what ?

you mean , enable load css aysnc , the background image loads fine , and if you disable it , the background image not loading ?

let me sum it up again:

all CSS options -> works ?

what happens if you re-enable back the rest but keep load async css off, how does it go ?

and what happens if only async css enabled, rest off, how does it go ?