7

I have integrated Google One Tap into my website. The login process works well on desktop, but on mobile, there is a horizontal scroll after logging in. It's also important to note that the direction of the website is right-to-left.

Following a user's sign-in, Google adds an empty <div> with the ID "g_a11y_announcement" at the end of the <body>: g_a11y_announcement div

It has the following CSS attributes:

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

I get a blank screen right after signing in because of a 10,000 pixel overflow: blank screen

Unfortunately, I can't share a link to my website, but taking this element out of the DOM removes the scrollbar.

There's no documentation on this <div> or how to tell Google One Tap that the page is right-to-left. The only solution I can think of is to override the CSS, but I don't want my application to be blocked by Google.

#g_a11y_announcement {
    display: none;
}

What is the purpose of this <div>? Is there another solution that I am missing?

Shachar Langer
  • 501
  • 5
  • 7

3 Answers3

1

I have same problem like you, I resolved for first moment this problem on next way:

after logout I redirected on login page by window.location, I know thats not right answer for this problem but that will resolve for first, problem is because in this solution app will refresh

Rajko Vrga
  • 11
  • 1
  • Doing a full refresh will resolve the issue, but my website is a single-page application, and refreshing the page might result in data loss. Trying to save the data locally isn't realistic since Google One Tap can appear anywhere on the website. – Shachar Langer Feb 13 '23 at 09:32
  • I know, u are right, but in situation if u dont have a problem with refresh. I had different situation. I needed fix on any way. Thank you on answer – Rajko Vrga Feb 13 '23 at 22:49
0

Rather than hiding the div completely, I moved it to the right when the page direction is right-to-left. The solution below uses the SASS parent selector to check the direction.

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

The only downside to this solution is that it could break if Google changes the One Tap implementation.

Shachar Langer
  • 501
  • 5
  • 7
0

I either did not found the reason for this div to appear or how to solve it, but in the meantime I ended up with the following solution:

body #g_a11y_announcement{
    display: none;
}

Everyone - if you managed this out with a real solution please update! Thanks!

Avraham Weinstein
  • 582
  • 4
  • 13