Sveltekit on local replica vs IC: Discrepancies in getBoundingClientRect() on the vertical axis

Developers JavaScript
1

Hi there,

I’m currently working on my first Sveltekit app on the IC. It’s pretty simple so far. The only code I run in onMount() is a measurement of getBoundingClientRect(). The problem is that the dimensions on the vertical axis (height and consequently y) turn out different when run locally vs when run on the IC. I cannot wrap my head around this, since my understanding is that the Sveltekit example from this repo generates static sites where all assets should already have been loaded when they are served to the client. So there shouldn’t be any timing issues when calling getBoundingClientRect() on the local vs on the live version. I use the svelte.config.js as it is shown in the example repo:

const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess({
		postcss: {
			plugins: [autoprefixer]
		}
	}),
	kit: {
		adapter: adapter({
			fallback: 'index.html',
			precompress: false
		}),
		files: {
			assets: filesPath('static'),
			hooks: {
				client: filesPath('src/hooks.client'),
				server: filesPath('src/hooks.server')
			},
			lib: filesPath('src/lib'),
			params: filesPath('src/params'),
			routes: filesPath('src/routes'),
			serviceWorker: filesPath('src/service-worker'),
			appTemplate: filesPath('src/app.html'),
			errorTemplate: filesPath('src/error.html')
		}
	},
	serviceWorker: {
		register: false
	},
	version: {
		name: version
	},
	trailingSlash: 'always'
};
export default config;

I wonder whether this is related to the IC in some way, or just a common frontend issue when using these kinds of apps that I’m not aware of?

2

I don’t think spontaneously that it has anything to do with the IC.

The problem is that the dimensions on the vertical axis (height and consequently y) turn out different

Different how, you get different sizes or rather something like zero/null vs an effective size?

when run locally vs when run on the IC.

When you say run locally you mean npm run dev or you mean npm run build && dfx deploy local ( or something)?

If the first, do you face the same issue when you run your prod build locally without the IC - e.g. npm run build && npx serve build?

3

Not sure what you mean, but I log a DOMrect that is further down the page and all the attributes (actually not only on the vertical axis) take different values across hard reloads.

When I say running locally I did this and I always do this: start a local replica, dfx deploy, npm run dev

Interestingly, running npm run build && npx serve build like you suggested produces the same issue as the live version that I deployed on the IC.

4

This confirms that it is definitely not an IC-related issue.

I would guess that the problem lies in the differences in chunking between your development and production build - i.e., some components are fetched and mounted earlier or later, and for this reason, some HTML elements are rendered in a different order, or the browser engine finishes rendering in a different order. But, that’s just a wild guess.

1 Like