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

Question

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

用户登录后，Google 会在

<div>

末尾添加一个空的

<body>

，其 ID 为“g_a11y_announcement”：

它具有以下 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 重定向到登录页面，我知道这不是这个问题的正确答案，但这将首先解决，问题是因为在此解决方案中应用程序将刷新

Answer 2

当页面方向从右到左时，我没有完全隐藏 div，而是将其移动到右侧。下面的解决方案使用 SASS 父选择器来检查方向。

#g_a11y_announcement {
  [dir="rtl"] & {
    left: auto;
    right: -10000px;
  }
}

此解决方案的唯一缺点是，如果 Google 更改 One Tap 实现，它可能会崩溃。

Answer 3

我要么没有找到这个div出现的原因，也没有找到如何解决它，但与此同时我最终得到了以下解决方案：

body #g_a11y_announcement{
    display: none;
}

大家 - 如果您用真正的解决方案解决了这个问题，请更新！ 谢谢！

Answer 4

快速补丁：

#g_a11y_announcement {
    right: 0;
}

Answer 5

我申请了：

#g_a11y_announcement {
  inset-inline-start: -10000px;
}

这基本上用正确的逻辑“插入”等效项覆盖了不知道“左”属性的逻辑方向。

它似乎让事情恢复正常 - 但如果元素 id 将来发生变化，当然会破坏。

有人尝试报告此问题吗？