Sold Out/Save badges appear briefly while loading

Store Design
1

I have an irritating visual glitch that appears briefly while my website is being loaded.

When you first load https://www.teenycherubs.com.au you see the “Sold Out” and “Save” badges on the top left hand side of the page very briefly before they’re hidden by the banner.

The elements are .grid-product__sold-out and .grid-product__on-sale.

I don’t know what is loading them - there’s nothing in the console logs - and the elements disappear too quickly for me to debug or to even take a screenshot.

I suspect it’s the flickity-viewport but I’ve disabled the section and I still have the problem.

Can anyone see what might be loading these elements and how to fix?

2

Ok it’s the flickity code, and specifically the code that I’ve commented out in the snippet below under the 

{%- capture flickity_options -%}
{
  "prevNextButtons": true,
  "pageDots": false,
  "contain": true,
  "cellAlign": "left",
  "groupCells": true,
  "wrapAround": true,
  "arrowShape": {"x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25}
}
{%- endcapture -%}

{% if section.settings.title != blank %}

  ## {{ section.settings.title | escape }}
  

---

{% endif %}

{%- assign collection = collections[section.settings.collection] -%}
{%- assign product_limit = section.settings.product_count -%}

    
      {% for product in collection.products limit: product_limit %}
        

          
            
            
{{ product.title }}

            

{{ product.price | money }}

          
      
  
    {% endfor %}
    

{% schema %}
{
  "name": "Collection Slider",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Featured Collection"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "range",
      "id": "product_count",
      "min": 4,
      "max": 12,
      "label": "Number of products to display",
      "default": 4
    }
  ],
  "presets": [
    {
      "category": "Collection",
      "name": "Collection Slider",
      "settings": {}
    }
  ]
}
{% endschema %}
3

In case this helps someone, what I did was to add a new “hidden” css class and add this to both the badges:

div.hidden
{
   display: none
}

I then removed this class using javascript once the page was fully loaded.