sveltejs / kit

web development, streamlined
https://kit.svelte.dev
MIT License
18.11k stars 1.84k forks source link

Error in @sveltejs/kit/src/runtime/client/client.js at line 1641 when scrolling on Mobile Safari UI/WKWebView #11205

Open eastm0108 opened 7 months ago

eastm0108 commented 7 months ago

Description:

I encountered an error while using SvelteKit on Mobile Safari UI/WKWebView. The error occurs in the @sveltejs/kit/src/runtime/client/client.js file, specifically at line 1641. The error message is TypeError: undefined is not an object (evaluating 'a.x').

Environment:

Browser: Mobile Safari UI/WKWebView Device: iPhone Device Family: iPhone

Steps to Reproduce:

Open the application on Mobile Safari UI/WKWebView. Perform a specific action that triggers scrolling.

Expected Behavior:

The application should scroll without errors.

Actual Behavior:

The error TypeError: undefined is not an object (evaluating 'a.x') is thrown during scrolling.

Additional Information:

I'm using Sentry to capture errors, and the issue seems to be related to the scrollTo(scroll.x, scroll.y); line in @sveltejs/kit/src/runtime/client/client.js.

Code Snippet:

  addEventListener('popstate', async (event) => {
    if (event.state?.[INDEX_KEY]) {
    // if a popstate-driven navigation is cancelled, we need to counteract it
    // with history.go, which means we end up back here, hence this check
      if (event.state[INDEX_KEY] === current_history_index) return;

      const scroll = scroll_positions[event.state[INDEX_KEY]];

      // if the only change is the hash, we don't need to do anything...
      if (current.url.href.split('#')[0] === location.href.split('#')[0]) {
      // ...except handle scroll
        scroll_positions[current_history_index] = scroll_state();
        current_history_index = event.state[INDEX_KEY];
        scrollTo(scroll.x, scroll.y);
        return;
      }

      const delta = event.state[INDEX_KEY] - current_history_index;

      await navigate({
        url: new URL(location.href),
        scroll,
        keepfocus: false,
        redirect_chain: [],
        details: null,
        accepted: () => {
          current_history_index = event.state[INDEX_KEY];
        },
        blocked: () => {
          history.go(-delta);
        },
        type: 'popstate',
        delta
      });
    }
  });

System Info

System:
    OS: macOS 13.6.1
    CPU: (8) arm64 Apple M1
    Memory: 137.83 MB / 16.00 GB
    Shell: 5.8 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 7.7.6 - ~/.nvm/versions/node/v15.14.0/bin/npm
    Watchman: 2022.08.15.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 119.0.6045.199
    Firefox: 112.0
    Safari: 16.6
  npmPackages:
    @playwright/test: ^1.28.1 => 1.30.0 
    @sentry/sveltekit: ^7.72.0 => 7.80.1 
    @sentry/vite-plugin: ^2.7.1 => 2.10.0 
    @splidejs/svelte-splide: ^0.2.9 => 0.2.9 
    @storybook/addon-essentials: ^7.0.0-beta.38 => 7.0.0-beta.38 
    @storybook/addon-interactions: ^7.0.0-beta.38 => 7.0.0-beta.38 
    @storybook/addon-links: ^7.0.0-beta.38 => 7.0.0-beta.38 
    @storybook/blocks: ^7.0.0-beta.38 => 7.0.0-beta.38 
    @storybook/svelte: ^7.0.0-beta.38 => 7.0.0-beta.38 
    @storybook/sveltekit: ^7.0.0-beta.38 => 7.0.0-beta.38 
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1 
    @sveltejs/adapter-auto: ^1.0.0 => 1.0.2 
    @sveltejs/kit: ^1.5.0 => 1.16.3 
    @tailwindcss/line-clamp: ^0.4.2 => 0.4.2 
    @typescript-eslint/eslint-plugin: ^5.45.0 => 5.49.0 
    @typescript-eslint/parser: ^5.45.0 => 5.49.0 
    autoprefixer: ^10.4.13 => 10.4.13 
    axios: ^1.3.3 => 1.3.4 
    eslint: ^8.28.0 => 8.33.0 
    eslint-config-prettier: ^8.5.0 => 8.6.0 
    eslint-plugin-storybook: ^0.6.10 => 0.6.10 
    eslint-plugin-svelte3: ^4.0.0 => 4.0.0 
    jsdom: ^22.1.0 => 22.1.0 
    postcss: ^8.4.21 => 8.4.21 
    prettier: ^2.8.0 => 2.8.3 
    prettier-plugin-svelte: ^2.8.1 => 2.9.0 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    storybook: ^7.0.0-beta.38 => 7.0.0-beta.38 
    svelte: ^3.54.0 => 3.55.1 
    svelte-carousel: ^1.0.23 => 1.0.25 
    svelte-check: ^3.0.1 => 3.0.3 
    svelte-exmarkdown: ^2.1.0 => 2.1.0 
    svelte-gestures: ^1.4.1 => 1.4.1 
    swiper: ^9.1.0 => 9.1.0 
    tailwindcss: ^3.2.4 => 3.2.4 
    tslib: ^2.4.1 => 2.5.0 
    typescript: ^4.9.3 => 4.9.5 
    vite: ^4.0.0 => 4.0.4 
    vite-plugin-build-info: ^0.1.2 => 0.1.2 
    vite-plugin-info: ^0.4.0 => 0.4.0 
    vitest: ^0.25.3 => 0.25.8
eltigerchino commented 6 months ago

Please provide a minimal reproduction in the form of a code repository.