移动端浏览器中CSS粘性表头覆盖锚点链接内容的问题求助

我最近在一个基于WordPress的站点上遇到了个奇怪的问题：桌面端使用position: sticky的表头一切正常，但在移动端的Chrome和Safari浏览器里，点击锚点链接跳转到特定区块时，粘性表头会把内容顶部80px的区域给挡住。

我试过给目标区块加上scroll-margin-top: 100px;的样式，但在移动端视口下好像完全被忽略了。

你可以在我的站点上复现这个问题（移动端设备下点击菜单里的任意“产品规格”跳转链接就能看到）。

我目前用的CSS代码是这样的：

.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
}
.section-target {
  scroll-margin-top: 100px;
}

想请教下，是不是移动端浏览器在scroll-margin-top和粘性表头的组合上有什么特殊的兼容性问题？或者有没有更靠谱的、用JavaScript动态计算偏移量的解决方案？

备注：内容来源于stack exchange，提问作者PORTAKING PAKISTAN