移动端Marquee跑马灯横幅文本缩放裁剪问题排查

问题描述 #

实现的滚动Marquee跑马灯横幅在桌面端运行正常，但移动端加载后1秒，文本会随机缩放并出现顶部裁剪。

正常显示效果：

异常状态（加载1秒后）：

完整代码 #

<style>
  .custom-marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 35px;
    overflow-x: hidden;
    z-index: 100;
    background:{{section.settings.colorBackground}}; 
    color:{{section.settings.colorText}}; 
  }
  .custom-marquee a {
    color:{{section.settings.colorText}}; 
  }
  .custom-marquee .track {
      position: absolute;
      bottom: 5px;
      white-space: nowrap;
      will-change: transform;
      animation: marquee 11s linear infinite;
      font-size: 1.3rem;
  }
  .custom-marquee .content {
    margin-left: 40px;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }
</style>
  <div class="custom-marquee " role="region" {{ block.shopify_attributes }}>
    {%- if section.settings.text != blank -%}
      {%- if section.settings.link != blank -%}
        <a href="{{ section.settings.link }}" class="">
      {%- endif -%}
          <div class="track ">
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </div>
          {%- if section.settings.link != blank -%}
        </a>
      {%- endif -%}
    {%- endif -%}
  </div>
<script>
var marquees = document.getElementsByClassName("marquee-text");
for (let i = 0; i < marquees.length; i++) {
  let str = marquees.item(i).innerHTML;
  let improvedText = str.replaceAll("|", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")
  marquees.item(i).innerHTML = improvedText
}
</script>
{% 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 %}

问题根源 #

1. 移动端浏览器的自动文本缩放功能（如Safari）会强制修改字体大小，打破原布局
2. .track使用绝对定位+固定bottom:5px，文本缩放后无法适配容器高度，导致顶部裁剪
3. 动画的transform触发移动端浏览器重绘优化，放大了字体缩放的影响
4. 原动画位移量仅为-20%，循环逻辑不连贯，易触发布局异常

修复方案 #

1. 禁用移动端文本自动缩放 #

在CSS中为文本类添加强制禁止缩放的属性：

.marquee-text {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

2. 优化容器布局与文本对齐 #

替换固定高度和绝对定位，用flex布局确保文本垂直居中，避免裁剪：

.custom-marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  /* 替换固定height为min-height，适配文本高度 */
  min-height: 35px;
  overflow-x: hidden;
  z-index: 100;
  background:{{section.settings.colorBackground}}; 
  color:{{section.settings.colorText}}; 
  /* 用flex实现垂直居中 */
  display: flex;
  align-items: center;
}

.custom-marquee .track {
  /* 移除绝对定位和bottom属性 */
  white-space: nowrap;
  will-change: transform;
  animation: marquee 11s linear infinite;
  font-size: 1.3rem;
  /* 统一行高避免偏移 */
  line-height: 1;
}

3. 修正动画位移逻辑 #

将位移量改为-100%，确保文本循环连贯，消除布局异常：

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

4. 替换JS文本分隔为CSS实现 #

原JS用多个 替换|易导致宽度计算异常，改用CSS margin实现分隔：

.marquee-text:not(:last-child):after {
  content: "";
  margin: 0 30px; /* 可根据需求调整间距 */
}

同时删除原JavaScript中的replaceAll代码，减少DOM操作。

内容的提问来源于stack exchange，提问作者Jack Archer