Ridiculously high z index when using suspense fallback component #1287

hichemfantar · 2023-02-11T01:51:05Z

hichemfantar
Feb 11, 2023

three version: 0.148.0
@react-three/fiber version: 8.11.0
@react-three/drei version: 9.56.20
node version: 16
npm (or yarn) version: 8

Problem description:

Recently added a loader to show progress % while the canvas is loading.
This however added an extremely high z-index value which broke my ui because I have a dialog that displays on top of the canvas. the dialog now has a lower z value than the canvas.
This is the value that's being applied after adding the suspense progress loader z-index: 8388635;

Relevant code:

function Loader() {
	const { progress } = useProgress();

	return <Html center>{Math.floor(progress)}%</Html>;
}

export default function ThreeExperience() {
	const texture = useLoader(LUTCubeLoader, "/lut/F-6800-STD.cube");

	return (
		<Canvas
			orthographic
			gl={{ antialias: true }}
			camera={{ position: [0, 0, 100], zoom: 70 }}
		>
			<Suspense fallback={<Loader />}>
				<color attach="background" args={["black"]} />
				<Scene />
				<EffectComposer disableNormalPass>
					<Bloom
						mipmapBlur
						levels={9}
						intensity={1.5}
						luminanceThreshold={1}
						luminanceSmoothing={1}
					/>
					<LUT lut={texture} />
				</EffectComposer>
			</Suspense>
		</Canvas>
	);
}

A preview of the z values being applied to the canvas and the loader progress div:

no z index when i remove the suspense loader:

drcmda
Feb 11, 2023
Maintainer

you can set the z-index range, look into the docs for html.

anyway, html is meant for annotations. i would much rather use tunnel-rat or simple state updates to inform a parent dom component about loading states instead of using drei/html.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ridiculously high z index when using suspense fallback component #1287

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Ridiculously high z index when using suspense fallback component #1287

hichemfantar Feb 11, 2023

Problem description:

Relevant code:

Suggested solution:

Replies: 1 comment

drcmda Feb 11, 2023 Maintainer

hichemfantar
Feb 11, 2023

drcmda
Feb 11, 2023
Maintainer