• Noticed the styling on my client’s website broke about once every 24 hours. Very frustrating to deal with.

    Opened a support ticket with Cloudways and honestly they have not been very helpful at all – I basically had to do all of the technical debugging to isolate this issue (even though I’m not really a web developer!)

    Inspecting the network traffic on my website, noticed that one of the css files generated by Spectra for Spectra blocks would 404 Not Found every 24 hours, which is when the Breeze plugin autocleared the cache.

    I checked in all of the settings of the cache and tried to figure out how to get Breeze to ignore caching certain directories – no dice.

    I have since removed Breeze from all of my Cloudways websites. The websites are now working without the styling issues from before.

    Too bad, I want to use Breeze since it is the recommended plugin by Cloudways – but as long as it breaks my site there’s no way it’s worth the frustration constantly having to fix my client’s site breaking.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author adeelkhan

    (@adeelkhan)

    Apologies for any inconvenience you may be experiencing. Our support team has promptly escalated your case to the Breeze team. They are currently investigating the matter and will reach out to you with updates shortly.

    Plugin Author owaisalam

    (@owaisalam)

    As per providing information regarding a 404 error encountered in the CSS file located in the UAG folder within the styles of the Spectra plugin. The error is observed when the user utilizes patterns directly from their Starter Template Plugin.

    Upon receiving the concern, our team diligently attempted to replicate the issue by following the steps provided. However, despite our efforts, we were unable to reproduce the error.

    For clarity and transparency, I have outlined the steps we followed for replication:

    1. Installation of the following plugins and theme:
      • Spectra and Starter Templates plugins
      • Astra Theme (activated)
    2. Building a new template with the Starter Templates plugin, while ensuring that Breeze is enabled with its caching and minification options.

    Following the completion of the template launch, we meticulously monitored for any console errors and CSS file breaks. However, our efforts did not yield any such errors or breaks.

    Furthermore, to assist you better in understanding our process, I have recorded a video capturing the entire procedure. You can access the video through the attached link for further insight.
    https://phpstack-458710-2069236.cloudwaysapps.com/SC/Starter-Template.mp4

    Should there be any additional steps or details we may have overlooked, kindly provide them to us. We are committed to resolving this issue promptly and ensuring the seamless functionality of our plugins.

    Thank you for your attention to this matter. We look forward to your response.

    rvscc

    (@rvscc)

    I think i have the same problem, my website keeps also getting mixed up.

    But it’s only in private browser?

    I have the same issue as well, but it appears to be for mobile view. The content layout gets screwed up and icons from Spectra blocks get ridiculously large.

    See screenshot: https://app.screencast.com/unqXSirfdXffo

    Whenever I notice this issue, I have to regenerate assets via Spectra plugin settings, then purge cache via Breeze plugin. This seems to temporarily fix the issue, but it will reoccur after some time.

    • This reply was modified 1 month, 1 week ago by Jesse B.
    Thread Starter yiek8888

    (@yiek8888)

    For cloudways users having this CSS styling issue when using Spectra, I have figured out how to fix the issue.

    The core issue: I don’t know why, but Breeze or something else keeps deleting the generated Spectra CSS stylesheet files periodically. Then when Varnish serves the page from the cache, the stylesheet 404s because the stylesheet doesn’t exist anymore, and it doesn’t get auto generated when it was served by the Varnish cache. If the Varnish cache is purged and the page causes a cache miss, then wordpress regenerates the stylesheet assets and it’s fine, but when it is a cache hit and the stylesheet doesn’t exist, the Spectra block styles on the page are all broken.

    To fix this, we need to revert the way that Spectra generates the css back to pre-v2.1.1: Before v2.1.1, the stylesheet was inlined into the HTML file, post v2.1.1 the default is to create separate CSS files. When the styles are inlined with the HTML, then the Varnish cache can correctly serve the page with styles every time. There is an option to disable the separate css files (File Generation) in the Spectra settings. https://wpspectra.com/announcements/clean-html-quick-loading-time-with-spectra/

    I have moved my websites back to default Varnish + Breeze configuration with that Spectra File Generation setting disabled for the past few months and I have not observed this issue again.

    • This reply was modified 1 month, 1 week ago by yiek8888.
    • This reply was modified 1 month, 1 week ago by yiek8888.
    Jesse B

    (@jesseislil)

    @yiek8888 Thanks for the update. Can the issue be resolved by simply disabling ‘file generation’ Spectra setting (setting screenshot)? Any other setting to change?

    Prior to resolving the issue, were you experiencing this issue for both desktop and mobile?

    Thread Starter yiek8888

    (@yiek8888)

    @jesseislil Yes just disable separate css file generation and that was enough to fix the issue. You want to inline the CSS into the HTML files so that Breeze can not delete the generated CSS, and so that Varnish caching works to provide CSS styles for the whole page without any additional stylesheet files that could cache miss.

    I was experiencing the issue more often on mobile but also was able to reproduce it on desktop whenever I disabled the browser cache or used an incognito window.

    Jesse B

    (@jesseislil)

    Thanks. You’re right, desktop version reproduces issue in incognito window. I didn’t even realize it was happening on desktop too. Just disabled file regeneration.

    To the OP and everyone – THANKS. This issue had been driving me nuts for some time. I did a complete company website redesign only to have it break every two days. I realized it must be the Spectra / Breeze combo but didn’t get anywhere with CW. The only delta was I switched from Spectra on these 2 sites from Elementor (too heavy these days and too many security warnings). Let’s hope this holds. 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this review.