@@ -210,6 +210,11 @@ function createRenderer(canvas: HTMLCanvasElement, width: number, height: number
210210 } ) ;
211211}
212212
213+ function getDevicePixelRatio ( precision = 3 ) {
214+ const factor = Math . pow ( 10 , precision ) ;
215+ return Math . round ( window . devicePixelRatio * factor ) / factor ;
216+ }
217+
213218export type EffectLayerProps = PropsWithChildren < {
214219 className ?: string ;
215220} > ;
@@ -228,7 +233,7 @@ export function EffectLayer({ children, className }: EffectLayerProps) {
228233 const canvas = rCanvas . current ;
229234 const rect = root . getBoundingClientRect ( ) ;
230235 const uniforms = createUniforms ( rect . width , rect . height ) ;
231- const renderer = createRenderer ( canvas , rect . width , rect . height , window . devicePixelRatio ) ;
236+ const renderer = createRenderer ( canvas , rect . width , rect . height , getDevicePixelRatio ( ) ) ;
232237
233238 const { gl } = renderer ;
234239 const geometry = new Triangle ( gl ) ;
@@ -243,7 +248,7 @@ export function EffectLayer({ children, className }: EffectLayerProps) {
243248 function update ( time : number ) {
244249 if ( ! isActive . current ) return ;
245250 uniforms . uTime . value = time * 0.001 ;
246- renderer . dpr = window . devicePixelRatio ;
251+ renderer . dpr = getDevicePixelRatio ( ) ;
247252 renderer . render ( { scene : mesh } ) ;
248253 rRaf . current = requestAnimationFrame ( update ) ;
249254 }
0 commit comments