search

opral / inlang-paraglide-js

Tree-shakable i18n library build on the inlang ecosystem.
https://inlang.com/m/gerre34r/library-inlang-paraglideJs
48 stars 1 forks source link

[paraglide-sveltekit] Message duplication after domains (on mobile?) #182

Closed Skymax00 closed 3 months ago

Skymax00 commented 3 months ago

It seems like on mobile the text is getting duplicated after the message ends, starting from when there was a domain. It happens only after you reload the site for the first time.

For example: Hello, welcome to Github.com results in Hello, welcome to Github.comGithub.com

And for example: Hello, welcome to Github.com, glad to see you again results in Hello, welcome to Github.com, glad to see you againGithub.com, glad to see you again

My setup

Paraglide config files were unmodified, deploying on Cloudflare Pages, here's my package.json:

{
    "name": "frontend",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev --port 3000",
        "codegen": "graphql-codegen --config codegen.ts",
        "build": "vite build",
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "eslint ."
    },
    "engines": {
        "node": ">=18.18.0"
    },
    "devDependencies": {
        "@graphql-codegen/cli": "^5.0.2",
        "@inlang/paraglide-js": "1.11.2",
        "@sveltejs/adapter-cloudflare": "^4.7.0",
        "@sveltejs/kit": "^2.5.19",
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "@types/eslint": "^8.56.11",
        "eslint": "^9.8.0",
        "eslint-plugin-svelte": "^2.43.0",
        "globals": "^15.9.0",
        "svelte": "^5.0.0-next.205",
        "svelte-check": "^3.8.5",
        "typescript": "^5.5.4",
        "typescript-eslint": "^8.0.0-alpha.44",
        "vite": "^5.3.5",
        "vite-plugin-graphql-loader": "^4.0.2",
        "wrangler": "^3.57.1"
    },
    "type": "module",
    "dependencies": {
        "@dicebear/collection": "^9.2.1",
        "@dicebear/core": "^9.2.1",
        "@inlang/paraglide-sveltekit": "0.11.0",
        "@tailwindcss/vite": "^4.0.0-alpha.18",
        "@urql/core": "^5.0.5",
        "graphql": "^16.9.0",
        "graphql-ws": "^5.16.0",
        "mode-watcher": "^0.4.1",
        "runed": "^0.15.0",
        "tailwind-merge": "^2.4.0",
        "tailwind-variants": "^0.2.1",
        "tailwindcss": "^4.0.0-alpha.18"
    }
}

My Story

I noticed my site was doing this: https://github.com/user-attachments/assets/e242d855-78cf-447e-ac0f-943da98a3fe9 when my message was this: Screenshot_3 Screenshot_2

Then

So I shrunk it down to this: Screenshot_1 and I was still getting the last part duplicated: Screenshot_4

Workaround

So finally I removed the .com and it didn't get duplicated anymore: Screenshot_5 so now yes I reverted to the first message without the .com and it works fine: https://github.com/user-attachments/assets/b14d5c06-595b-4c2a-95c3-3586e0e20d67

LorisSigrist commented 3 months ago

WHAT? I've never seen anything like this

I tired this on my phone (on safari) with the exact text you attached & couldn't reproduce it.

It's possible that this is re-rendering issue with svelte itself (I see you're using an experimental version). Does this happen anywhere in the app or just in that component?

LorisSigrist commented 3 months ago

I was able to reproduce this when using Svelte 5. Still not sure what's going on

Skymax00 commented 3 months ago

Yeah Svelte 5. Sorry I didn't want to open a ticket on Svelte without checking here first.

LorisSigrist commented 3 months ago

I'm opening an issue in the svelte repo. Already made a reproduction. Apparently this only happens in the webkit rendered on mobile, only on svelte 5.

Paraglide has nothing to do with it, it always happens if you dynamically render a string with a link inside it.