Css 带有背景GIF的透明文本不适用于Chrome Mobile 79.0.3945.73版

我有一个背景为gif的透明文本。它适用于桌面chrome和safari。在safari mobile上可用，但在chrome mobile上不显示标题。链接会出现，但标题不会出现。在桌面和Safari Mobile上，标题显示

const Menu = () => {
  return (
    <section className="menu">
      <h1 id="menuTitle">The Pinellas Ale Trail</h1>
      <section className="menuLinks">
        <nav>
          <ul>
            <li>
              <Link to="/">Home Page</Link>
            </li>
            <li>
              <Link to="/BreweryMap">Brewery Map</Link>
            </li>
            <li>
              <Link to="/AdminPage">Add info</Link>
            </li>
          </ul>
        </nav>
      </section>
    </section>
  )
}

.menu {
    margin: auto;
    background-image: url(../src/Images/Mandolorian.gif);
    /* color: transparent; */
    background-clip: text;
    -webkit-background-clip: text;
    text-align: center;
    background-position: center;
    width: 100%;
    margin-top: 0.5rem;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#menuTitle {
    text-align: center;
    margin: 0;
    font-family: 'Milonga', cursive;
    color: rgba(255, 255, 255, 0);
}

const菜单=（）=>{
返回(
皮内拉斯啤酒小径


主页


啤酒厂地图


添加信息


)
}
.菜单{
保证金：自动；
背景图像：url（../src/Images/Mandolorian.gif）；
/*颜色：透明*/
背景剪辑：文本；
-webkit背景剪辑：文本；
文本对齐：居中；
背景位置：中心；
宽度：100%；
边缘顶部：0.5雷姆；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
#梅努蒂特尔{
文本对齐：居中；
保证金：0；
字体系列：“米隆加”，草书；
颜色：rgba（255，255，255，0）；
}

我从

已知问题：

iOS Safari的后台大小为：cover；+背景附件：固定； iOS Safari的后台大小为：封面；在页面的主体上