Merge pull request #17679 from storybookjs/norbert/ch-1636-storybook-…

…composition-ref-is-shown-when

UI: Fix composition support in safari

lib/ui/src/components/preview/FramesRenderer.tsx

@@ -17,7 +17,6 @@ const getActive = (refId: FramesRendererProps['refId']) => {
 const SkipToSidebarLink = styled(Button)(({ theme }) => ({
   display: 'none',
   '@media (min-width: 600px)': {
-    display: 'block',
     position: 'absolute',
     top: 10,
     right: 15,
@@ -55,12 +54,13 @@ export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
   const active = getActive(refId);
 
   const styles = useMemo<CSSObject>(() => {
+    // add #root to make the selector high enough in specificity
     return {
-      '[data-is-storybook="false"]': {
-        visibility: 'hidden',
+      '#root [data-is-storybook="false"]': {
+        display: 'none',
       },
-      '[data-is-storybook="true"]': {
-        visibility: 'visible',
+      '#root [data-is-storybook="true"]': {
+        display: 'block',
       },
     };
   }, []);