• Resolved hagenb

    (@hagenb)


    I have found that after enabling “Optimize CSS Loading” my cart item flashes red (the color of my theme’s global color) when loading my page for the first time.

    I have tried looking at and changing the CSS after the page has loaded, but I can’t see what is causing it to act like this. I have tried setting the cart’s background to white, with no luck.

    Can you please have a look at it, maybe you can see why this is happening?

    My suspicion is that it is setting the cart’s background to my theme’s color until the page has loaded, but why it’s doing it, I don’t know.

    My website is – http://www.wondertree.co.za

    You will have to clear your browser cache every time you want to see this, because like I said it only happens the first time the page loads.

    Thank you.

    • This topic was modified 3 years, 4 months ago by hagenb.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi @hagenb,

    Thanks for reporting this issue. I was able to see the “red background flash” on the cart icon/button when I hard-refreshed your page.

    I don’t know exactly how your site is set up (as in what theme or page builder you’ve used), but have you confirmed that this only happens with Boost’s “Optimize CSS Loading” feature enabled? If you disable Boost, does the behavior stop?

    My suspicion is that it is setting the cart’s background to my theme’s color until the page has loaded, but why it’s doing it, I don’t know.

    That’s not a bad guess, but Jetpack Boost doesn’t add any additional custom CSS to your site. It regenerates the critical CSS and moves that over to a point on the page where it gets loaded quicker and speeds up the page rendering. That may be where the conflict is coming from.

    I’ve inspected the button using browser dev tools, and I see the button is an Elementor field. I would recommend contacting Elementor about this to see if they can provide additional context that may be helpful for our development team. It’s possible there’s also some JavaScript interacting with the button.

    We may also want to consider making it possible for specific CSS files to be excluded from the CSS optimization feature in the future.

    Thread Starter hagenb

    (@hagenb)

    @ihenetudan

    Thank you for your reply and taking time to look into this.

    I don’t know exactly how your site is set up (as in what theme or page builder you’ve used), but have you confirmed that this only happens with Boost’s “Optimize CSS Loading” feature enabled? If you disable Boost, does the behavior stop?

    I’m using the Astra theme and Elementor page builder. Yes I can confirm that it only happens when Boost is enabled. When I disable Boost the behavior stops.

    I’ve inspected the button using browser dev tools, and I see the button is an Elementor field. I would recommend contacting Elementor about this to see if they can provide additional context that may be helpful for our development team. It’s possible there’s also some JavaScript interacting with the button.

    I will contact them and get back to you as soon as i receive feedback.

    We may also want to consider making it possible for specific CSS files to be excluded from the CSS optimization feature in the future.

    That would be awesome. It would also be great if we could edit the CSS afterwards, but I’m not sure if that’s possible.

    @hagenb Thanks for the follow-up response.

    I will contact them and get back to you as soon as i receive feedback.

    Sounds like a plan. Let us know how that goes.

    That would be awesome. It would also be great if we could edit the CSS afterwards, but I’m not sure if that’s possible.

    I’ve shared your feedback with the development team for consideration.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Issue with Elementor cart item’ is closed to new replies.