How to fix marquee banner code glitch on mobile?

[Project_ATLAS]

I currently have this cool marquee banner as the announcement bar for my store. However it has a couple of issues.

The first one is that on mobile it has a weird glitch where it will display properly on the initial load, but then after a couple of seconds or so it randomly increases the size of the text and renders incorrectly as you can see in the example below.

(Displaying correctly)

1 second later (displaying incorrectly)

I’ve tried looking at the code, but I don’t really know what I’m looking at here.

  
    {%- if section.settings.text != blank -%}
      {%- if section.settings.link != blank -%}
        
      {%- endif -%}
          

            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {{ section.settings.text | escape }}
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          

          {%- if section.settings.link != blank -%}
        
      {%- endif -%}
    {%- endif -%}
  

{% schema %}
{
  "name": "Marquee Announcement",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "default": "Black Friday Sale | Save up to 75% off storewide",
      "label": "Add text to display"
    },
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#B2FCE4"
    },
    {
      "type": "color",
      "id": "colorText",
      "label": "Text color",
      "default": "#000"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    }
  ]
}
{% endschema %}

Thank you in advance for any help.

[Abdosamer]

Hi Project_ATLAS, Can you provide your shop url? so I can inspect the elements and see the code that is responsible for the issue.

[Project_ATLAS]

Magic Brush Co.

Thank you.

[Abdosamer]

I tried the website on different mobile screens, and the text is consistent, doesn’t seem to have any issue.

[Project_ATLAS]

Sorry, that was not the marquee banner, I have had to replace it with the standard one. But I have reactivated it now, please recheck it for me now.

(Also, if it doesn’t happen right away, it can be intermittent, you might need to refresh sort of thing).

The text for it actually reads ‘Black Friday Sale | Save up to 75% off’ (as one line) but it is being broken up with the line removed as well.

[Abdosamer]

I looked into it, it seems the reason why the text is broken is because this part of code

let improvedText = str.replaceAll("|", "            ")

the code replaces (|) character with white space, that is why you don’t see the character instead there are white space.
So there are alot of solutions here depending on what you need, do you need to display (|) character?

[Project_ATLAS]

Yes I do. I think this is a line of code added by someone I hired to fix the other issue I mentioned, which worked for a while, but has since started breaking again.

[Abdosamer]

I don’t have the context of the whole code, but If the “|” characters are not causing any problems you can remove this line of code, and send me the result.

[Project_ATLAS]

Okay thank you. I’m not sure what you mean by you don’t have the context for the whole code though. I described the main issue above with images, and provided the entire code.

[Abdosamer]

I mean there are many moving part of the whole website, you provided a snippet of code, there is maybe another snippet of code affect this one, or javascript function somewhere in a file affecting other files, that what I mean by context.

[Project_ATLAS]

No, that’s literally everything. That code is sitting in a .liquid file inside of the sections folder. There is no other code.

[Project_ATLAS]

Also I remove the code you mentioned and that did fix that issue thank you.

There’s just this problem with the banner randomly changing size for some reason, maybe it’s the font size changing or? As you can see in the photos, it loads normally for a moment, and then breaks for some reason. I’m guessing it has something to do with the track and some kind of sizing issue, or, I don’t really know.

[Abdosamer]

Hi Project_ATLAS, are you still facing the text size problem, I looked into the website and it seems to work normally.

[Project_ATLAS]

Hi Abdosamer, yes, it is still broken. Are you viewing the site on mobile? (The problem only occurs here)

[MRamzan]

Follow this latest code:

Create a new section marquee and paste below code.

You can add marquee section to any page.

How to add MARQUEE effect in Shopify? Multiple Sections FREE [2024]

  
      {%- if section.settings.link != blank -%}
        
      {%- endif -%}
          

            {%- for block in section.blocks -%}
            {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          

          {%- if section.settings.link != blank -%}
        
    {%- endif -%}
  

{% schema %}
{
  "name": "Marquee Text",
  "settings": [
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#000"
    },
    {
      "type": "color",
      "id": "colorText",
      "label": "Text color",
      "default": "#fff"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "range",
      "id": "marquee_height",
      "min": 24,
      "max": 200,
      "step": 2,
      "default": 46,
      "label": "Marquee height"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 8,
      "max": 100,
      "step": 2,
      "default": 24,
      "label": "Font size"
    }
  ],
    "blocks": [
    {
      "type": "text",
      "name": "Text",
      "limit": 20,
      "settings": [
         {
          "type": "text",
          "id": "new_text",
          "default": "Welcome to store",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee",
      "blocks": [
        {
          "type": "text"
        },
        {
          "type": "text"
        },
        {
          "type": "text"
        }
      ]
    }
  ]
}
{% endschema %}

Free Shopify Images Marquee Section | Slide Brand Logos Anywhere [2024]

[carolnogueira]

If anyone is still having the issue, Claude Code fixed it for me. It said:
”The fix ended up being about making sure the JavaScript waited for the content to fully load before cloning it, and keeping the section visible the whole time instead of hiding it. That was causing the “flash and disappear” issue on mobile.”

And here’s the code:

{% assign gap_between_elements = section.settings.gap_between_elements %}

{% content_for 'blocks' %}

{% stylesheet %}
marquee-component {
display: block;
width: 100%;
overflow: hidden;
position: relative;
}

.marquee__wrapper {
display: flex;
width: fit-content;
will-change: transform;
}

.marquee__content {
min-width: max-content;
display: flex;
gap: var(–marquee-gap);
}

.marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
white-space: nowrap;
}

.marquee__content .marquee__repeated-items * {
max-width: none;
}

.marquee__repeated-items {
min-width: max-content;
display: flex;
gap: var(–marquee-gap);
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.marquee__repeated-items > * {
align-content: center;
}

@media (prefers-reduced-motion: no-preference) {
marquee-component[data-ready=“true”]:not([data-disabled]) .marquee__wrapper {
animation: marquee-motion var(–marquee-speed, 30s) linear infinite var(–marquee-direction, normal);
}
}

@media (prefers-reduced-motion: reduce) {
marquee-component .marquee__wrapper {
animation: none;
}
}

@keyframes marquee-motion {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(calc(-50% - (var(–marquee-gap, 24px) / 2)), 0, 0);
}
}
{% endstylesheet %}

{% schema %}
{
“name”: “t:names.marquee”,
“disabled_on”: {
“groups”: [“header”, “footer”]
},
“blocks”: [
{
“type”: “text”
},
{
“type”: “icon”
},
{
“type”: “logo”
},
{
“type”: “_divider”
}
],
“settings”: [
{
“type”: “select”,
“id”: “movement_direction”,
“label”: “t:settings.motion_direction”,
“options”: [
{
“value”: “reverse”,
“label”: “t:options.forward”
},
{
“value”: “normal”,
“label”: “t:options.reverse”
}
],
“default”: “normal”
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:settings.color_scheme”,
“default”: “scheme-1”
},
{
“type”: “header”,
“content”: “t:content.padding”
},
{
“type”: “range”,
“id”: “padding-block-start”,
“label”: “t:settings.top”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “px”,
“default”: 24
},
{
“type”: “range”,
“id”: “padding-block-end”,
“label”: “t:settings.bottom”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “px”,
“default”: 24
},
{
“type”: “range”,
“id”: “gap_between_elements”,
“label”: “t:settings.gap”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “px”,
“default”: 24
}
],
“presets”: [
{
“name”: “t:names.marquee_section”,
“category”: “t:categories.banners”,
“blocks”: {
“text”: {
“type”: “text”,
“settings”: {
“text”: “We make things that work better and last longer.”,
“type_preset”: “custom”,
“font”: “var(–font-body–family)”,
“font_size”: “var(–font-size–h2)”,
“line_height”: “tight”,
“letter_spacing”: “tight”,
“case”: “none”,
“wrap”: “nowrap”,
“width”: “fit-content”
}
}
},
“block_order”: [“text”]
}
]
}
{% endschema %}