在移动设备上使用 Google One Tap 登录后出现水平滚动条

Question

我已将 Google One Tap 集成到我的网站中。登录过程在桌面上运行良好，但在移动设备上，登录后会出现水平滚动。还需要注意的是，网站的方向是从右到左。

用户登录后，Google<div>在的末尾添加一个 ID 为“g_a11y_announcement”的空白<body>：

它具有以下 CSS 属性：

#g_a11y_announcement {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

由于 10,000 像素溢出，我在登录后立即出现黑屏：

不幸的是，我无法共享到我的网站的链接，但从 DOM 中取出此元素会删除滚动条。

没有关于此<div>或如何告诉 Google One Tap 该页面是从右到左的文档。我能想到的唯一解决方案是覆盖 CSS，但我不希望我的应用程序被 Google 阻止。

#g_a11y_announcement {
    display: none;
}

这样做的目的是什么<div>？我还缺少其他解决方案吗？

Answer 1

我和你有同样的问题，我首先通过以下方式解决了这个问题：

注销后，我通过 window.location 重定向到登录页面，我知道这不是这个问题的正确答案，但这将首先解决，问题是因为在此解决方案中应用程序将刷新