UserButton popup menu is broken on mobile #4939

arybitskiy · 2025-01-19T08:19:13Z

Preliminary Checks

I have reviewed the documentation: https://clerk.com/docs
I have searched for existing issues: https://github.com/clerk/javascript/issues
I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://covolute.com/

Publishable key

pk_live_Y2xlcmsuY292b2x1dGUuY29tJA

Description

Steps to reproduce:

sign up https:///auth/sign-up
open in mobile (can be emulated in desktop browser, should be small screen)
Click button on top top open sidebar
Open account icon on bottom of sidebar
Open menu with Free plan
Information with plan will show up and disappear immediately
Close menu and navigate to homepage (in navbar open - logo at top)
Scroll is broken

Expected behavior:

Free plan information show be visible.
Scroll shouldn't be broken after closing modal.

Actual behavior:

Free plan info is getting disappeared
Scroll is broken on whole website

Environment

Packages: +1
+
Progress: resolved 1, reused 0, downloaded 1, added 1, done

  System:
    OS: macOS 14.7.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 23.63 GB / 96.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.0 - ~/.nvm/versions/node/v22.13.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.13.0/bin/npm
    pnpm: 9.15.3 - ~/.nvm/versions/node/v22.13.0/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.266
    Edge: 131.0.2903.147
    Safari: 18.1.1
  npmPackages:
    @artsy/fresnel: 8.0.1 => 8.0.1
    @ast-grep/napi: 0.29.0 => 0.29.0
    @babel/plugin-transform-runtime: 7.25.9 => 7.25.9
    @babel/preset-react: 7.26.3 => 7.26.3
    @babel/runtime: 7.26.0 => 7.26.0
    @clerk/backend: 1.23.3 => 1.23.3
    @clerk/remix: 4.4.13 => 4.4.13
    @clerk/types: 4.41.1 => 4.41.1
    @code-hike/lighter: 1.0.3 => 1.0.3
    @covolute/ai: link:./dist/libs/ai => 0.0.0
    @covolute/annotations: link:./dist/libs/annotations => 0.0.0
    @covolute/ast: link:./dist/libs/ast => 0.0.0
    @covolute/cli-utils: link:./dist/libs/cli-utils => 0.0.0
    @covolute/constants: link:./dist/libs/constants => 0.0.0
    @covolute/files: link:./dist/libs/files => 0.0.0
    @covolute/fs: link:./dist/libs/fs => 0.0.0
    @covolute/history: link:./dist/libs/history => 0.0.0
    @covolute/jupyter: link:./dist/libs/jupyter => 0.0.0
    @covolute/langgraph: link:./dist/libs/langgraph => 0.0.0
    @covolute/query: link:./dist/libs/query => 0.0.0
    @covolute/schemas: link:./dist/libs/schemas => 0.0.0
    @covolute/search: link:./dist/libs/search => 0.0.0
    @covolute/string: link:./dist/libs/string => 0.0.0
    @covolute/types: link:./dist/libs/types => 0.0.0
    @covolute/utils: link:./dist/libs/utils => 0.0.0
    @eslint/js: 9.18.0 => 9.18.0
    @gwhitney/detect-indent: 7.0.1 => 7.0.1
    @inquirer/core: 10.1.3 => 10.1.3
    @inquirer/prompts: 7.2.2 => 7.2.2
    @inquirer/type: 3.0.2 => 3.0.2
    @langchain/community: 0.3.24 => 0.3.24
    @langchain/core: 0.3.29 => 0.3.29
    @langchain/langgraph: 0.2.33 => 0.2.33
    @langchain/langgraph-checkpoint: 0.0.10 => 0.0.10
    @langchain/langgraph-checkpoint-sqlite: 0.1.3 => 0.1.3
    @langchain/openai: 0.3.17 => 0.3.17
    @mdx-js/react: 3.1.0 => 3.1.0
    @mdx-js/rollup: 3.1.0 => 3.1.0
    @monaco-editor/react: 4.6.0 => 4.6.0
    @number-flow/react: 0.5.1 => 0.5.1
    @nx/devkit: 20.3.1 => 20.3.1
    @nx/esbuild: 20.3.1 => 20.3.1
    @nx/eslint: 20.3.1 => 20.3.1
    @nx/eslint-plugin: 20.3.1 => 20.3.1
    @nx/jest: 20.3.1 => 20.3.1
    @nx/js: 20.3.1 => 20.3.1
    @nx/node: 20.3.1 => 20.3.1
    @nx/playwright: 20.3.1 => 20.3.1
    @nx/plugin: 20.3.1 => 20.3.1
    @nx/remix: 20.3.1 => 20.3.1
    @nx/rollup: 20.3.1 => 20.3.1
    @nx/storybook: 20.3.1 => 20.3.1
    @nx/vite: 20.3.1 => 20.3.1
    @nx/web: 20.3.1 => 20.3.1
    @playwright/test: 1.49.1 => 1.49.1
    @radix-ui/react-alert-dialog: 1.1.4 => 1.1.4
    @radix-ui/react-avatar: 1.1.2 => 1.1.2
    @radix-ui/react-collapsible: 1.1.2 => 1.1.2
    @radix-ui/react-dialog: 1.1.4 => 1.1.4
    @radix-ui/react-dropdown-menu: 2.1.4 => 2.1.4
    @radix-ui/react-icons: 1.3.2 => 1.3.2
    @radix-ui/react-label: 2.1.1 => 2.1.1
    @radix-ui/react-navigation-menu: 1.2.3 => 1.2.3
    @radix-ui/react-popover: 1.1.4 => 1.1.4
    @radix-ui/react-progress: 1.1.1 => 1.1.1
    @radix-ui/react-select: 2.1.4 => 2.1.4
    @radix-ui/react-separator: 1.1.1 => 1.1.1
    @radix-ui/react-slot: 1.1.1 => 1.1.1
    @radix-ui/react-switch: 1.1.2 => 1.1.2
    @radix-ui/react-tabs: 1.1.2 => 1.1.2
    @radix-ui/react-tooltip: 1.1.6 => 1.1.6
    @radix-ui/themes: 3.1.6 => 3.1.6
    @react-email/components: 0.0.32 => 0.0.32
    @remix-run/dev: 2.15.2 => 2.15.2
    @remix-run/eslint-config: 2.15.2 => 2.15.2
    @remix-run/node: 2.15.2 => 2.15.2
    @remix-run/react: 2.15.2 => 2.15.2
    @remix-run/serve: 2.15.2 => 2.15.2
    @remix-run/server-runtime: 2.15.2 => 2.15.2
    @remix-run/testing: 2.15.2 => 2.15.2
    @remotion/animation-utils: 4.0.248 => 4.0.248
    @remotion/bundler: 4.0.248 => 4.0.248
    @remotion/cli: 4.0.248 => 4.0.248
    @remotion/eslint-plugin: 4.0.248 => 4.0.248
    @remotion/motion-blur: 4.0.248 => 4.0.248
    @remotion/player: 4.0.248 => 4.0.248
    @remotion/renderer: 4.0.248 => 4.0.248
    @remotion/tailwind: 4.0.248 => 4.0.248
    @rollup/plugin-babel: 6.0.4 => 6.0.4
    @rollup/plugin-replace: 6.0.2 => 6.0.2
    @sapphire/async-queue: 1.5.5 => 1.5.5
    @shikijs/monaco: 1.26.1 => 1.26.1
    @storybook/addon-essentials: 8.4.7 => 8.4.7
    @storybook/addon-interactions: 8.4.7 => 8.4.7
    @storybook/addon-themes: 8.4.7 => 8.4.7
    @storybook/core-server: 8.4.7 => 8.4.7
    @storybook/csf: 0.1.13 => 0.1.13
    @storybook/react: 8.4.7 => 8.4.7
    @storybook/react-vite: 8.4.7 => 8.4.7
    @storybook/test: 8.4.7 => 8.4.7
    @storybook/test-runner: 0.21.0 => 0.21.0
    @stripe/react-stripe-js: 3.1.1 => 3.1.1
    @stripe/stripe-js: 5.5.0 => 5.5.0
    @svgr/cli: 8.1.0 => 8.1.0
    @svgr/plugin-jsx: 8.1.0 => 8.1.0
    @svgr/plugin-svgo: 8.1.0 => 8.1.0
    @swc-node/register: 1.10.9 => 1.10.9
    @swc/cli: 0.6.0 => 0.6.0
    @swc/core: 1.10.7 => 1.10.7
    @swc/helpers: 0.5.15 => 0.5.15
    @tailwindcss/typography: 0.5.16 => 0.5.16
    @testing-library/jest-dom: 6.6.3 => 6.6.3
    @testing-library/react: 16.1.0 => 16.1.0
    @testing-library/user-event: 14.5.2 => 14.5.2
    @types/big.js: 6.2.2 => 6.2.2
    @types/cli-progress: 3.11.6 => 3.11.6
    @types/diff: 7.0.0 => 7.0.0
    @types/jest: 29.5.14 => 29.5.14
    @types/line-column: 1.0.2 => 1.0.2
    @types/lodash: 4.17.14 => 4.17.14
    @types/mock-fs: 4.13.4 => 4.13.4
    @types/node: 22.10.5 => 22.10.5
    @types/node-persist: 3.1.8 => 3.1.8
    @types/react: 18.3.18 => 18.3.18
    @types/react-dom: 18.3.5 => 18.3.5
    @types/semver: 7.5.8 => 7.5.8
    @types/uuid: 10.0.0 => 10.0.0
    @types/vscode: 1.96.0 => 1.96.0
    @types/yargs: 17.0.33 => 17.0.33
    @uidotdev/usehooks: 2.4.1 => 2.4.1
    @upstash/redis: 1.34.3 => v1.34.3
    @vitejs/plugin-react: 4.3.4 => 4.3.4
    @vitest/coverage-v8: 2.1.8 => 2.1.8
    @vitest/ui: 2.1.8 => 2.1.8
    @vscode/test-cli: 0.0.10 => 0.0.10
    @vscode/test-electron: 2.4.1 => 2.4.1
    autoprefixer: 10.4.20 => 10.4.20
    axios: 1.7.9 => 1.7.9
    big.js: 6.2.2 => 6.2.2
    chalk: 5.4.1 => 5.4.1
    chokidar: 4.0.3 => 4.0.3
    class-variance-authority: 0.7.1 => 0.7.1
    cli-progress: 3.12.0 => 3.12.0
    clsx: 2.1.1 => 2.1.1
    cmdk: 1.0.4 => 1.0.4
    codehike: 1.0.4 => 1.0.4
    colors-cli: 1.0.33 => 1.0.33
    commitizen: 4.3.1 => 4.3.1
    cookie: 1.0.2 => 1.0.2
    covolute: link:./dist/cli => 0.0.0
    crypto-js: 4.2.0 => 4.2.0
    cz-git: 1.11.0 => 1.11.0
    czg: 1.11.0 => 1.11.0
    devicon: 2.16.0 => 2.16.0
    diff: 7.0.0 => 7.0.0
    dotenv: 16.4.7 => 16.4.7
    esbuild: 0.24.2 => 0.24.2
    esbuild-obfuscator-plugin: 0.0.5 => 0.0.5
    eslint: 9.18.0 => 9.18.0
    eslint-config-prettier: 9.1.0 => 9.1.0
    eslint-plugin-import: 2.31.0 => 2.31.0
    eslint-plugin-playwright: 2.1.0 => 2.1.0
    eslint-plugin-unused-imports: 4.1.4 => 4.1.4
    glob: 11.0.1 => 11.0.1
    ignore: 7.0.0 => 7.0.0
    intl-parse-accept-language: 1.0.0 => 1.0.0
    is-ip: 5.0.1 => 5.0.1
    isbot: 5.1.21 => 5.1.21
    javascript-obfuscator: 4.1.1 => 4.1.1
    jest: 29.7.0 => 29.7.0
    jest-environment-node: 29.7.0 => 29.7.0
    jsdom: 26.0.0 => 26.0.0
    line-column: 1.0.2 => 1.0.2
    lodash: 4.17.21 => 4.17.21
    lucide-react: 0.469.0 => 0.469.0
    magic-string: 0.30.17 => 0.30.17
    marked: 14.1.4 => 14.1.4
    marked-terminal: 7.2.1 => 7.2.1
    micromatch: 4.0.8 => 4.0.8
    minimatch: 10.0.1 => 10.0.1
    mock-fs: 5.4.1 => 5.4.1
    monaco-editor: 0.52.2 => 0.52.2
    motion: 11.17.0 => 11.17.0
    next-themes: 0.4.4 => 0.4.4
    node-persist: 4.0.3 => 4.0.3
    nodemon: 3.1.9 => 3.1.9
    nx: 20.3.1 => 20.3.1
    open: 10.1.0 => 10.1.0
    openai: 4.78.1 => 4.78.1
    polished: 4.3.1 => 4.3.1
    postcss: 8.4.49 => 8.4.49
    prettier: 3.4.2 => 3.4.2
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1
    react-email: 3.0.6 => 3.0.6
    react-icons: 5.4.0 => 5.4.0
    react-resizable-panels: 2.1.7 => 2.1.7
    react-responsive: 10.0.0 => 10.0.0
    recharts: 2.15.0 => 2.15.0
    remark-frontmatter: 5.0.0 => 5.0.0
    remark-mdx-frontmatter: 5.0.0 => 5.0.0
    remark-mermaidjs: 7.0.0 => 7.0.0
    remix-themes: 1.6.1 => 1.6.1
    remix-utils: 8.0.0 => 8.0.0
    remotion: 4.0.248 => 4.0.248
    resend: 4.1.1 => 4.1.1
    rollup: 4.30.1 => 4.30.1
    rollup-plugin-obfuscator: 1.1.0 => 1.1.0
    semver: 7.6.3 => 7.6.3
    shadcn: 2.1.8 => 2.1.8
    shiki: 1.26.1 => 1.26.1
    sonner: 1.7.1 => 1.7.1
    spacetrim: 0.11.60 => 0.11.60
    storybook: 8.4.7 => 8.4.7
    stripe: 17.5.0 => 17.5.0
    svix: 1.45.1 => 1.45.1
    swc-loader: 0.2.6 => 0.2.6
    tailwind-merge: 2.6.0 => 2.6.0
    tailwindcss: 3.4.17 => 3.4.17
    tailwindcss-animate: 1.0.7 => 1.0.7
    ts-invariant: 0.10.3 => 0.10.3
    ts-jest: 29.2.5 => 29.2.5
    ts-lsp-client: 1.0.3 => 1.0.3
    ts-node: 10.9.2 => 10.9.2
    tslab: 1.0.22 => 1.0.22
    tslib: 2.8.1 => 2.8.1
    typed-emitter: 2.1.0 => 2.1.0
    typescript: 5.7.3 => 5.7.3
    typescript-eslint: 8.19.1 => 8.19.1
    uuid: 11.0.5 => 11.0.5
    vercel: 39.3.0 => 39.3.0
    verdaccio: 5.33.0 => 5.33.0
    vite: 6.0.7 => 6.0.7
    vite-plugin-ngrok: 1.1.0 => 1.1.0
    vite-plugin-vercel: 9.0.4 => 9.0.4
    vite-tsconfig-paths: 5.1.4 => 5.1.4
    vitest: 2.1.8 => 2.1.8
    yaml: 2.7.0 => 2.7.0
    yargs: 17.7.2 => 17.7.2
    zod: 3.24.1 => 3.24.1

arybitskiy · 2025-01-19T08:50:59Z

I fixed issue with scroll using next hack

const HackClerkIssue = () => {
  useEffect(() => {
    return () => {
      setTimeout(() => {
        const node = document.querySelector('.cl-modalBackdrop');
        if (node) {
          const mutationObserver = new MutationObserver((mutationsList) => {
            for (const mutation of mutationsList) {
              if (mutation.type === 'childList') {
                const wasRemoved = Array.from(mutation.removedNodes).some((node) =>
                  (node as HTMLElement).classList.contains('cl-modalBackdrop'),
                );

                if (wasRemoved) {
                  setTimeout(() => {
                    document.body.style.removeProperty('overflow');
                    document.body.style.removeProperty('padding-right');
                  }, 100);
                  mutationObserver.disconnect();
                }
              }
            }
          });
          mutationObserver.observe(node.parentNode!, { childList: true, subtree: false });
        }
      }, 500);
    };
  }, []);
  return null;
};

But would appreciate if issue could be resolved.

LekoArts · 2025-01-20T08:11:08Z

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Clerk!

arybitskiy added the needs-triage A ticket that needs to be triaged by a team member label Jan 19, 2025

LekoArts added needs-reproduction Awaiting a minimal reproduction and removed needs-triage A ticket that needs to be triaged by a team member labels Jan 20, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UserButton popup menu is broken on mobile #4939

UserButton popup menu is broken on mobile #4939

arybitskiy commented Jan 19, 2025

arybitskiy commented Jan 19, 2025 •

edited

Loading

LekoArts commented Jan 20, 2025

UserButton popup menu is broken on mobile #4939

UserButton popup menu is broken on mobile #4939

Comments

arybitskiy commented Jan 19, 2025

Preliminary Checks

Reproduction

Publishable key

Description

Environment

arybitskiy commented Jan 19, 2025 • edited Loading

LekoArts commented Jan 20, 2025

arybitskiy commented Jan 19, 2025 •

edited

Loading