fix: rendering of glow effect on mobile safari (#5272)

src/nft/components/explore/Banner.tsx

@@ -6,7 +6,7 @@ import { calculateCardIndex } from 'nft/utils'
 import { Suspense, useCallback, useMemo, useState } from 'react'
 import { useQuery } from 'react-query'
 import { useNavigate } from 'react-router-dom'
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 import { opacify } from 'theme/utils'
 
 import { Carousel, LoadingCarousel } from './Carousel'
@@ -20,6 +20,12 @@ const BannerContainer = styled.div`
   position: relative;
 `
 
+// Safari has issues with blur / overflow
+// https://stackoverflow.com/a/71353198
+const fixBlurOnSafari = css`
+  transform: translate3d(0, 0, 0);
+`
+
 const AbsoluteFill = styled.div`
   position: absolute;
   top: -96px;
@@ -29,6 +35,8 @@ const AbsoluteFill = styled.div`
 `
 
 const BannerBackground = styled(AbsoluteFill)<{ backgroundImage: string }>`
+  ${fixBlurOnSafari}
+
   background-image: ${(props) => `url(${props.backgroundImage})`};
   filter: blur(62px);
   opacity: ${({ theme }) => (theme.darkMode ? 0.3 : 0.2)};