@@ -567,36 +567,38 @@ export default function Playground({
567
567
</ div >
568
568
{ renderIframes
569
569
? [
570
- < div className = "playground__preview" >
570
+ < div className = "playground__preview" key = "preview" >
571
571
{ ! iframesLoaded && renderLoadingScreen ( ) }
572
572
{ /*
573
- We render two iframes, one for each mode.
574
- When the set mode changes, we hide one frame and
575
- show the other. This is done to avoid flickering
576
- and doing unnecessary reloads when switching modes.
577
- */ }
573
+ We render two iframes, one for each mode.
574
+ When the set mode changes, we hide one frame and
575
+ show the other. This is done to avoid flickering
576
+ and doing unnecessary reloads when switching modes.
577
+ */ }
578
578
{ devicePreview
579
579
? [
580
- < div className = { ! isIOS ? 'frame-hidden' : 'frame-visible' } aria-hidden = { ! isIOS ? 'true' : null } >
580
+ < div key = "ios-iframe" className = { ! isIOS ? 'frame-hidden' : 'frame-visible' } aria-hidden = { ! isIOS ? 'true' : null } >
581
581
< device-preview mode = "ios" >
582
582
< iframe height = { frameSize } ref = { ( ref ) => handleFrameRef ( ref , 'ios' ) } src = { sourceiOS } > </ iframe >
583
583
</ device-preview >
584
584
</ div > ,
585
- < div className = { ! isMD ? 'frame-hidden' : 'frame-visible' } aria-hidden = { ! isMD ? 'true' : null } >
585
+ < div key = "md-iframe" className = { ! isMD ? 'frame-hidden' : 'frame-visible' } aria-hidden = { ! isMD ? 'true' : null } >
586
586
< device-preview mode = "md" >
587
587
< iframe height = { frameSize } ref = { ( ref ) => handleFrameRef ( ref , 'md' ) } src = { sourceMD } > </ iframe >
588
588
</ device-preview >
589
589
</ div > ,
590
590
]
591
591
: [
592
592
< iframe
593
+ key = "ios-iframe"
593
594
height = { frameSize }
594
595
className = { ! isIOS ? 'frame-hidden' : '' }
595
596
ref = { ( ref ) => handleFrameRef ( ref , 'ios' ) }
596
597
src = { sourceiOS }
597
598
aria-hidden = { ! isIOS ? 'true' : null }
598
599
> </ iframe > ,
599
600
< iframe
601
+ key = "md-iframe"
600
602
height = { frameSize }
601
603
className = { ! isMD ? 'frame-hidden' : '' }
602
604
ref = { ( ref ) => handleFrameRef ( ref , 'md' ) }
0 commit comments