Issue with CSS pop-in on Review Link

  • Resolved stylise

    (@stylise)


    1 month ago

    I have been struggling to overcome the CSS pop-in that happens on the following class–
    .glsr.woocommerce-product-rating .woocommerce-review-link

    I’m specifically targeting the review link on the product page–
    .woocommerce-product-rating.glsr.glsr-default.glsr-ltr .woocommerce-review-link

    What I’ve tried so far–

    • Added a custom CSS file in the theme header to force styles on the element
    • Applied !important to all relevant properties
    • Tried a MutationObserver to detect when the element appears and immediately apply styles
    • Added JS to force the element’s opacity to 1 as soon as it’s added
    • Tried delaying the plugin animation with JS

    Any assistance with this would be greatly appreciated.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Contributor Paul

    (@pryley)

    1 month ago

    What is the URL?

    Thread Starter stylise

    (@stylise)

    1 month ago

    Hi @pryley, unfortunately for security purposes, I can’t post it publicly.

    Plugin Contributor Paul

    (@pryley)

    1 month ago

    Site Reviews does not add a “CSS pop-in”, this is likely coming from your website or theme.

    It is difficult to help you if I cannot see it and inspect the HTML of the page for myself.

    Thread Starter stylise

    (@stylise)

    1 month ago

    By “pop-in” I’m referring to a flash of unstyled content. The element doesn’t read my custom CSS until after the page fully loads.

    • This reply was modified 1 month ago by stylise.
    Plugin Contributor Paul

    (@pryley)

    1 month ago

    Again, I can’t help you if I am unable to see the page.

    Maybe try making a screen recording?

    Thread Starter stylise

    (@stylise)

    1 month ago

    Here’s a link with 1 click expiry: [REDACTED]

    Plugin Contributor Paul

    (@pryley)

    1 month ago

    It’s happening because there is other inline CSS loading on your page that is also styling the link (which is used as soon as the HTML is loaded), and you are adding custom CSS to the Storefront child theme style.css file (which is fetched after the HTML is loaded).

    Thread Starter stylise

    (@stylise)

    1 month ago

    It turned out to be a.woocommerce-review-link that was loading before my custom style. I was way overthinking this. Thanks!

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

You must be logged in to reply to this topic.

  • 8 replies
  • 2 participants
  • Last reply from: stylise
  • Last activity: 1 month ago
  • Status: resolved