Fix BackgroundImagePlaceholderDiv to work properly in Safari (#645)

ShokoAnime · Sep 21, 2023 · fec288b · fec288b
1 parent 6260f92
commit fec288b
Show file tree

Hide file tree

Showing 9 changed files with 9 additions and 9 deletions.
diff --git a/src/components/BackgroundImagePlaceholderDiv.tsx b/src/components/BackgroundImagePlaceholderDiv.tsx
@@ -72,7 +72,7 @@ function BackgroundImagePlaceholderDiv(props: Props) {
   }, [imageSource]);
 
   return (
-    <div className={`${className} overflow-hidden`}>
+    <div className={`${className} relative overflow-hidden`}>
       <div
         className={cx(
           'absolute w-full h-full flex flex-col top-0 left-0 text-center z-[-1]',

diff --git a/src/components/Collection/CardViewItem.tsx b/src/components/Collection/CardViewItem.tsx
@@ -72,7 +72,7 @@ const CardViewItem = ({ item, mainSeries }: { item: CollectionGroupType, mainSer
         <Link to={viewRouteLink()}>
           <BackgroundImagePlaceholderDiv
             image={poster}
-            className="group relative h-[12.5625rem] w-[8.625rem] shrink-0 rounded-md drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+            className="group h-[12.5625rem] w-[8.625rem] shrink-0 rounded-md drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
             hidePlaceholderOnHover
             zoomOnHover
           >

diff --git a/src/components/Collection/GridViewItem.tsx b/src/components/Collection/GridViewItem.tsx
@@ -47,7 +47,7 @@ const GridViewItem = ({ isSeries = false, item }: Props) => {
       <div className="group flex w-[13.0625rem] shrink-0 flex-col content-center">
         <BackgroundImagePlaceholderDiv
           image={mainPoster}
-          className="relative mb-3 h-[19.0625rem] rounded-md border border-overlay-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+          className="mb-3 h-[19.0625rem] rounded-md border border-overlay-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
           hidePlaceholderOnHover
           zoomOnHover
         >

diff --git a/src/components/Collection/Series/SeriesEpisode.tsx b/src/components/Collection/Series/SeriesEpisode.tsx
@@ -62,7 +62,7 @@ const SeriesEpisode = ({ episode }: Props) => {
       <div className="z-10 flex items-center gap-x-8 p-8">
         <BackgroundImagePlaceholderDiv
           image={thumbnail}
-          className="group relative h-[13rem] min-w-[22.3125rem] rounded-md border border-panel-border"
+          className="group h-[13rem] min-w-[22.3125rem] rounded-md border border-panel-border"
           hidePlaceholderOnHover
           zoomOnHover
         >

diff --git a/src/pages/collection/series/SeriesImages.tsx b/src/pages/collection/series/SeriesImages.tsx
@@ -124,7 +124,7 @@ const SeriesImages = () => {
               <BackgroundImagePlaceholderDiv
                 image={item}
                 className={cx(
-                  'rounded-md drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)] relative border',
+                  'rounded-md drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)] border',
                   item === selectedImage ? 'border-panel-important border-2 opacity-50' : 'border-panel-border',
                   sizeMap[type],
                 )}

diff --git a/src/pages/collection/series/SeriesOverview.tsx b/src/pages/collection/series/SeriesOverview.tsx
@@ -37,7 +37,7 @@ const NextUpEpisode = ({ nextUpEpisode }: { nextUpEpisode: EpisodeType }) => {
     <div className="z-10 flex items-center gap-x-8">
       <BackgroundImagePlaceholderDiv
         image={thumbnail}
-        className="relative h-[13rem] min-w-[22.3125rem] rounded-md border border-panel-border"
+        className="h-[13rem] min-w-[22.3125rem] rounded-md border border-panel-border"
       />
       <EpisodeDetails episode={nextUpEpisode} />
     </div>

diff --git a/src/pages/dashboard/components/EpisodeDetails.tsx b/src/pages/dashboard/components/EpisodeDetails.tsx
@@ -51,7 +51,7 @@ function EpisodeDetails(props: Props): JSX.Element {
         : null}
       <BackgroundImagePlaceholderDiv
         image={episode.SeriesPoster}
-        className="relative mb-3 h-80 rounded border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+        className="mb-3 h-80 rounded border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
       >
         {percentage && <div className="absolute bottom-0 left-0 h-1 bg-panel-primary" style={{ width: percentage }} />}
         {isInCollection && (

diff --git a/src/pages/dashboard/components/SeriesDetails.tsx b/src/pages/dashboard/components/SeriesDetails.tsx
@@ -13,7 +13,7 @@ function SeriesDetails(props: { series: SeriesType }): JSX.Element {
     <div key={`series-${series.IDs.ID}`} className="mr-4 flex w-56 shrink-0 flex-col justify-center last:mr-0">
       <BackgroundImagePlaceholderDiv
         image={mainPoster}
-        className="relative mb-3 h-80 rounded border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+        className="mb-3 h-80 rounded border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
       />
       <p className="mb-1 truncate text-center text-sm font-semibold" title={series.Name}>{series.Name}</p>
       <p className="truncate text-center text-sm opacity-75" title={`${series.Size} Files`}>

diff --git a/src/pages/dashboard/panels/RecommendedAnime.tsx b/src/pages/dashboard/panels/RecommendedAnime.tsx
@@ -19,7 +19,7 @@ const RecommendedAnime = () => {
     <div key={`series-${series.ID}`} className="mr-4 flex w-56 shrink-0 flex-col justify-center last:mr-0">
       <BackgroundImagePlaceholderDiv
         image={series.Poster}
-        className="group relative mb-2 h-80 rounded border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+        className="group mb-2 h-80 rounded border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
       >
         <div
           className="absolute left-0 top-0 flex h-full w-full cursor-pointer flex-col items-center justify-center bg-panel-background-transparent text-sm font-semibold opacity-0 transition-opacity group-hover:opacity-100"