javascript - Clippath 在 Google Chrome 应用程序中没有响应

Question

我目前正在编写一个单页（使用 fullpage.js）并希望使用剪辑路径来匹配设计。

在任何浏览器（甚至是 PC 上的 Chrome）中，剪辑路径都可以正常工作。但是，如果我在朋友的智能手机上使用 Google Chrome 应用程序（S8+、S9+、华为 Mate 20 Lite、OnePlus 5+）进行尝试，则剪辑路径无法按预期工作（下面的图片链接）。

• 预期（在 Firefox 中工作）

• 当前（谷歌浏览器应用程序）

我写了以下代码：

.triangle-bottom__orange {
  position: relative;
  margin-top: 0;
  background-color: #f0932b;
  height: 20vh;
  -webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
  clip-path: polygon(100% 0, 0 0, 0 100%);
}

<div class="page2 section">
  <div class="triangle-bottom__orange"></div>
</div>

现场演示

非常感谢任何形式的帮助。

标签： javascripthtmlcssresponsive