围绕“使用 Google 登录”按钮和“一次点击”弹出窗口的空白问题

Question

我正在使用新的谷歌登录按钮和 angular 中的一键登录。目前，我正在使用库@abacritt/angularx-social-login 。 我尝试直接使用/gsi/client脚本，而这个脚本也只给出了相同的结果。 附上图片以供参考。

我尝试在我的应用程序上禁用所有 styles。 但没有任何改变。 当我直接检查按钮/弹出窗口并将一些颜色应用于动态生成的 iframe 的主体时，colors 正在发生变化。 没有其他 colors 受到影响。

下面是我根据图书馆文档设置的 html。

<asl-google-signin-button GoogleSigninButtonDirective type='standard' size="large" width="320"
    theme="filled_blue">
</asl-google-signin-button>

下面是应用程序模块。

{
      provide: 'SocialAuthServiceConfig',
      useValue: {        
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              'clientId_here',
            ),            
          }
        ],
        onError: (err) => {
          console.error(err);
        },
      } as SocialAuthServiceConfig,
    }

这个问题似乎与这个特定的 package 无关，因为我尝试不使用任何 package 并给出相同的结果。

Answer 1

当页面为深色主题时，我发生了这种情况， color-scheme: dark设置为 CSS 或带有元标记。

将color-scheme: light on the button/one-tap popup container 或 iframe 本身解决了这个问题。