\n\u003C/template>\n\n\u003Cstyle>\n.page-enter-active,\n.page-leave-active {\n transition: all 0.4s;\n}\n.page-enter-from,\n.page-leave-to {\n opacity: 0;\n filter: blur(1rem);\n}\n\u003C/style>\n```\n\nWhen you switch between pages and you have already scrolled a bit to the bottom you will see the jump between the pages.\n\nThanks to @awfulcode there is already a minimal reproduction for the issue: https://codesandbox.io/p/devbox/festive-cohen-jg4w3d\n\n\n### Describe the bug\n\nAs already mentioned by @awfulcode and others in the Issue https://github.com/nuxt/nuxt/issues/32053 there is a weird bug when using page transitions according to the documentation. There is a problem that the scroll to function is being executed before the page transition finished, results in a jiggy looking page transition since you see the scroll position applied before transition is completed.\n\nI'm currently using a workaround to get around this, but this is not perfect since there is a defined timeout. It would be better if this is properly aligned to the end of the page transition.\n\nI use a app/router.options.ts file to modify the basic scroll behaviour:\n```\nimport type { RouterConfig } from \"@nuxt/schema\";\n\nexport default \u003CRouterConfig>{\n scrollBehavior(to, from, savedPosition) {\n if(savedPosition)\n {\n if(to.path == from.path)\n return savedPosition\n else\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve(savedPosition)\n }, 450)\n })\n }\n else{\n if (to.hash && to.path == from.path) {\n return { el: to.hash }\n }\n else if(to.hash && to.path != from.path) {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve({ el: to.hash })\n }, 450)\n })\n }\n else{\n if(to)\n {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve({ top:0, left:0 })\n }, 450)\n })\n }\n else\n {\n return { top: 0, left: 0 }\n }\n }\n }\n }\n};\n``` \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2880],{"name":2868,"color":2869},32193,"Scroll behaviour timing is not properly aligned to page transition duration","2025-05-23T14:34:55Z","https://github.com/nuxt/nuxt/issues/32193",0.77034384,{"description":2887,"labels":2888,"number":2895,"owner":2871,"repository":2871,"state":2896,"title":2897,"updated_at":2898,"url":2899,"score":2900},"When using the selector feature (i.e. to.hash), it would be nice to be able to add the ability to set a global offset in order to compensate for fixed navbars on top.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1534\">#c1534\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2889,2892],{"name":2890,"color":2891},"good first issue","fbca04",{"name":2893,"color":2894},"2.x","d4c5f9",1713,"closed","Feature: ability to specify a scroll offset to scrollBehavior when passing selector","2023-02-06T11:25:00Z","https://github.com/nuxt/nuxt/issues/1713",0.7389754,{"description":2902,"labels":2903,"number":2910,"owner":2871,"repository":2911,"state":2896,"title":2912,"updated_at":2913,"url":2914,"score":2915},"### Version\n\nv3 latest commit\n\n### Description\n\nThe `size-*` class applied by a button gets overwritten by the icon itself.\n\nLeft one is in my project, right one is from the docs:\n\n\u003Cimg width=\"300\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c1c427fd-6854-4623-b5f1-db47a74450e2\" />\n\n\u003Cimg width=\"428\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7f2bf278-8b13-4d8b-84ec-beb29d9036bb\" />\n\nI couldnt reproduce in a fresh project, but my project is pretty clean still with no customizations. Might have something to do with the css order?\n",[2904,2907],{"name":2905,"color":2906},"bug","d73a4a",{"name":2908,"color":2909},"v3","49DCB8",2926,"ui","v3: Icon size gets overwritten by icon's width/height","2024-12-29T11:55:14Z","https://github.com/nuxt/ui/issues/2926",0.7443912,{"description":2917,"labels":2918,"number":2923,"owner":2871,"repository":2871,"state":2896,"title":2924,"updated_at":2925,"url":2926,"score":2927},"### Describe the feature\n\nWhen navigating to hash links, its not unusual that you actually want to add an additional couple of pixels to the scroll Y position.\r\n\r\nIt would be great if this could be controlled via an option in the nuxt.config, similar to the \"scrollBehaviourType\".\r\n\r\nProposed solution:\r\nAdd new option called \"scrollY\" that will take a positive or negative number of pixels for where the anchor will be.\r\n\r\n```\r\nexport default defineNuxtConfig({\r\n router: {\r\n options: {\r\n scrollBehaviorType: 'smooth',\r\n scrollY: '50px'\r\n }\r\n }\r\n})\r\n\r\n```\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2919,2922],{"name":2920,"color":2921},"3.x","29bc7f",{"name":2868,"color":2869},24280,"Add an option to configure anchors Y position when scrolling to a hashLink","2023-11-16T17:39:25Z","https://github.com/nuxt/nuxt/issues/24280",0.74549365,{"description":2929,"labels":2930,"number":2935,"owner":2871,"repository":2871,"state":2896,"title":2936,"updated_at":2937,"url":2938,"score":2939},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v21.6.1`\r\n- Nuxt Version: `3.10.3`\r\n- CLI Version: `3.10.1`\r\n- Nitro Version: `2.8.1`\r\n- Package Manager: `npm@10.2.4`\r\n- Builder: `-`\r\n- User Config: `nitro`, `modules`, `svgo`, `image`, `googleFonts`, `alias`, `app`, `typescript`, `devtools`, `devServer`\r\n- Runtime Modules: `@pinia/nuxt@0.5.1`, `@nuxt/content@2.12.0`, `@nuxtjs/tailwindcss@6.11.4`, `@nuxtjs/google-fonts@3.1.3`, `nuxt-svgo@4.0.0`, `@vueuse/nuxt@10.9.0`, `@nuxt/image@1.3.0`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-eedaaw\r\n\r\n### Describe the bug\r\n\r\nWhen transitioning between pages the scroll position is reset which is expected. However when passing the transition via the prop to \u003CNuxtPage> this reset takes places before the page is actually changed. Also the visibility 'glitches' in before changing the page.\r\n\r\nAlthough I am quite inexperienced I believe this could be related to https://github.com/nuxt/nuxt/issues/2593\r\n\r\nA workaround for me was to pass the transition in the nuxt config instead. To be able to use js hooks I declared them in the prop without specifying a transition name or type:\r\n```\r\n\u003CNuxtPage :transition=\"{onAfterEnter: () => {console.log('onAfterEnter')},}\"/>\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2931,2932],{"name":2868,"color":2869},{"name":2933,"color":2934},"pages","00DFB5",26034,"scroll jump & visibility issue with page transitions","2025-04-02T08:45:05Z","https://github.com/nuxt/nuxt/issues/26034",0.76192683,{"description":2941,"labels":2942,"number":2944,"owner":2871,"repository":2871,"state":2896,"title":2945,"updated_at":2946,"url":2947,"score":2948},"my layout \r\ndefault.vue\r\n```\r\n\u003Ctemplate lang=\"pug\">\r\n div\r\n topbar\r\n headbar\r\n channel-nav\r\n .container.nuxt-page-wrapper\r\n nuxt\r\n footbar\r\n\u003C/template>\r\n```\r\nand \r\n```\r\nlayout.styl\r\n.nuxt-page-wrapper\r\n min-height 100vh\r\n```\r\nI use scrollToTop in page it's not work\r\n```\r\nexport default {\r\n scrollToTop: true,\r\n mounted () {\r\n window.scrollTo(0, 0)\r\n }\r\n }\r\n\r\n```\r\nand my nuxt.config.js also not work\r\n```\r\nmodule.exports = {\r\n ...\r\n router: {\r\n scrollBehavior: function (to, from, savedPosition) {\r\n return false\r\n }\r\n },\r\n ...\r\n}\r\n```\r\nwhat's going on?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1134\">#c1134\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2943],{"name":2893,"color":2894},1286,"scrollToTop or saveBehavior not work when use 100vh height=100% in layout ","2023-01-18T15:41:01Z","https://github.com/nuxt/nuxt/issues/1286",0.7635077,{"labels":2950,"number":2956,"owner":2871,"repository":2871,"state":2896,"title":2957,"updated_at":2958,"url":2959,"score":2960},[2951,2954,2955],{"name":2952,"color":2953},"stale","ffffff",{"name":2868,"color":2869},{"name":2893,"color":2894},7812,"scrollBehavior didn't work as in example page","2023-01-22T15:36:04Z","https://github.com/nuxt/nuxt/issues/7812",0.7641217,{"description":2962,"labels":2963,"number":2968,"owner":2871,"repository":2911,"state":2896,"title":2969,"updated_at":2970,"url":2971,"score":2972},"### Description\n\nI tried to set toast position like [https://github.com/nuxt/ui/blob/d79da9d7b60c9972af64acd8e6eef4ae7d6bc3eb/docs/app/app.config.ts#L3](https://github.com/nuxt/ui/blob/d79da9d7b60c9972af64acd8e6eef4ae7d6bc3eb/docs/app/app.config.ts#L3).\nBut it didn't work\nHere's my code\n```ts\nexport default defineAppConfig({\n toaster: {\n position: \"top-center\" as const,\n expand: true,\n duration: 5000,\n },\n theme: {\n radius: 0.5,\n },\n ui: {\n colors: {\n primary: \"sky\",\n secondary: \"violet\",\n success: \"green\",\n info: \"blue\",\n warning: \"yellow\",\n error: \"red\",\n neutral: \"slate\",\n },\n },\n})\n```\nb.t.w. theme.radius also not working.",[2964,2967],{"name":2965,"color":2966},"question","d876e3",{"name":2908,"color":2909},4153,"About app.config.ts set toast position and duration","2025-05-15T08:40:30Z","https://github.com/nuxt/ui/issues/4153",0.76971734,{"description":2974,"labels":2975,"number":2977,"owner":2871,"repository":2871,"state":2896,"title":2978,"updated_at":2979,"url":2980,"score":2981},"Does anyone have an issue getting the scroll offset in Safari or iOS devices? \r\nThis works perfectly in Firefox:\r\n\r\n`this.scrollPosition = document.body.scrollTop`\r\n\r\nbut in Safari I'm always getting 0, no matter what. That happens only with Nuxt apps.\r\n\r\nThanks for your help!\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2182\">#c2182\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2976],{"name":2893,"color":2894},2512,"document.body.scrollTop always returns 0 in Safari","2023-01-18T15:55:20Z","https://github.com/nuxt/nuxt/issues/2512",0.7698816,["Reactive",2983],{},["Set"],["ShallowReactive",2986],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f3w-1yRyl9tZUy8FgLqT70Cv03VeSDzgKjAi-0UXMie8":-1},"/nuxt/ui/2739"]