@font-face 停止滚动捕捉点工作？

我知道它仍然是非常新的和实验性的，但一直在使用 css roll-snap，并且有一段时间无法让它工作。

我最终意识到，当我在 CSS 中使用 @font-face 时，滚动捕捉不起作用。如果我将字体系列更改为“Arial”而不是我定义的字体，它就可以正常工作。

还有其他人遇到过这个吗？

代码笔：https://codepen.io/galvinben/pen/LgzLxK https://codepen.io/galvinben/pen/LgzLxK

@font-face {
  font-family: 'fontName';
  src: url('https://fontlibrary.org/assets/fonts/bebas/b98870e552991cf3daa1031f9fb5ec74/4c8d42e69711e4e230d9081694db00ce/BebasNeueLight.otf')
}

body {
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  scroll-snap-type: y proximity;
  font-family: 'fontName';
}

.section {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


#one {
  background-color: #222;
}

#two {
  background-color: #333;
}

#three {
  background-color: #444;
}

#four {
  background-color: #555;
}

（更改字体系列后，可能需要刷新页面才能看到它是否工作。）

我现在也遇到这个问题。它似乎只影响 Chrome。

到目前为止，我能够解决这个问题的唯一方法是使滚动父元素成为除主体之外的元素。然而，这并不理想，因为随着地址和工具栏的缩小，您会失去本机移动功能。

无论如何，这是一个工作叉：https://codepen.io/treechime/pen/pxVeVr https://codepen.io/treechime/pen/pxVeVr

html, body {
    height: 100%;
}

.wrapper {
    bottom: 0;
    left: 0;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 0;

    scroll-snap-type: y mandatory;
}

.section {
    scroll-snap-align: start;
}

<div class="wrapper">
    <div class="section">one</div>
    <div class="section">two</div>
    <div class="section">three</div>
</div>

EDIT:

通过 javascript 在文档末尾添加一个类似乎也能达到目的，并且无需添加多余的元素。

body.snap {
    scroll-snap-type:y mandatory;
}

<script>document.body.classList.add('snap')</script>

或者不依赖 JS 来进行捕捉工作

body {
    scroll-snap-type:y mandatory;
}

body.fix {
    display:inline-block;
    width:100%;
}

<script>
    document.body.classList.add('fix');
    setTimeout(function() { document.body.classList.remove('fix'); }, 0);
</script>