diff --git a/lib/theme/durations.dart b/lib/theme/durations.dart
index 2ac6a36c6..880eb2e33 100644
--- a/lib/theme/durations.dart
+++ b/lib/theme/durations.dart
@@ -30,10 +30,11 @@ class Durations {
   static const filterRowExpandAnimation = Duration(milliseconds: 300);
 
   // viewer animations
-  static const viewerPageAnimation = Duration(milliseconds: 300);
+  static const viewerVerticalPageScrollAnimation = Duration(milliseconds: 300);
   static const viewerOverlayAnimation = Duration(milliseconds: 200);
   static const viewerOverlayChangeAnimation = Duration(milliseconds: 150);
-  static const viewerOverlayPageChooserAnimation = Duration(milliseconds: 200);
+  static const viewerOverlayPageScrollAnimation = Duration(milliseconds: 200);
+  static const viewerOverlayPageShadeAnimation = Duration(milliseconds: 150);
 
   // info animations
   static const mapStyleSwitchAnimation = Duration(milliseconds: 300);
diff --git a/lib/widgets/viewer/entry_viewer_stack.dart b/lib/widgets/viewer/entry_viewer_stack.dart
index 92a690a71..d37847071 100644
--- a/lib/widgets/viewer/entry_viewer_stack.dart
+++ b/lib/widgets/viewer/entry_viewer_stack.dart
@@ -358,7 +358,7 @@ class _EntryViewerStackState extends State<EntryViewerStack> with SingleTickerPr
   Future<void> _goToVerticalPage(int page) {
     return _verticalPager.animateToPage(
       page,
-      duration: Durations.viewerPageAnimation,
+      duration: Durations.viewerVerticalPageScrollAnimation,
       curve: Curves.easeInOut,
     );
   }
diff --git a/lib/widgets/viewer/info/info_page.dart b/lib/widgets/viewer/info/info_page.dart
index 112bb6310..2724f3d14 100644
--- a/lib/widgets/viewer/info/info_page.dart
+++ b/lib/widgets/viewer/info/info_page.dart
@@ -107,7 +107,7 @@ class _InfoPageState extends State<InfoPage> {
     BackUpNotification().dispatch(context);
     _scrollController.animateTo(
       0,
-      duration: Durations.viewerPageAnimation,
+      duration: Durations.viewerVerticalPageScrollAnimation,
       curve: Curves.easeInOut,
     );
   }
diff --git a/lib/widgets/viewer/overlay/multipage.dart b/lib/widgets/viewer/overlay/multipage.dart
index 3f96e80bb..cc5c5ece5 100644
--- a/lib/widgets/viewer/overlay/multipage.dart
+++ b/lib/widgets/viewer/overlay/multipage.dart
@@ -79,13 +79,6 @@ class _MultiPageOverlayState extends State<MultiPageOverlay> {
     final marginWidth = max(0, (availableWidth - extent) / 2 - separatorWidth);
     final horizontalMargin = SizedBox(width: marginWidth);
     final separator = SizedBox(width: separatorWidth);
-    final shade = IgnorePointer(
-      child: DecoratedBox(
-        decoration: BoxDecoration(
-          color: Colors.black38,
-        ),
-      ),
-    );
 
     return FutureBuilder<MultiPageInfo>(
       future: controller.info,
@@ -93,80 +86,57 @@ class _MultiPageOverlayState extends State<MultiPageOverlay> {
         final multiPageInfo = snapshot.data;
         if ((multiPageInfo?.pageCount ?? 0) <= 1) return SizedBox();
         if (multiPageInfo.uri != mainEntry.uri) return SizedBox();
-        return Container(
-          height: extent + separatorWidth * 2,
-          child: Stack(
-            children: [
-              Positioned(
-                top: separatorWidth,
-                width: availableWidth,
-                height: extent,
-                child: ListView.separated(
-                  key: ValueKey(mainEntry),
-                  scrollDirection: Axis.horizontal,
-                  controller: _scrollController,
-                  // default padding in scroll direction matches `MediaQuery.viewPadding`,
-                  // but we already accommodate for it, so make sure horizontal padding is 0
-                  padding: EdgeInsets.zero,
-                  itemBuilder: (context, index) {
-                    if (index == 0 || index == multiPageInfo.pageCount + 1) return horizontalMargin;
-                    final page = index - 1;
-                    final pageEntry = mainEntry.getPageEntry(multiPageInfo.getByIndex(page));
+        return SizedBox(
+          height: extent,
+          child: ListView.separated(
+            key: ValueKey(mainEntry),
+            scrollDirection: Axis.horizontal,
+            controller: _scrollController,
+            // default padding in scroll direction matches `MediaQuery.viewPadding`,
+            // but we already accommodate for it, so make sure horizontal padding is 0
+            padding: EdgeInsets.zero,
+            itemBuilder: (context, index) {
+              if (index == 0 || index == multiPageInfo.pageCount + 1) return horizontalMargin;
+              final page = index - 1;
+              final pageEntry = mainEntry.getPageEntry(multiPageInfo.getByIndex(page));
 
-                    return GestureDetector(
-                      onTap: () async {
-                        _syncScroll = false;
-                        controller.page = page;
-                        await _scrollController.animateTo(
-                          pageToScrollOffset(page),
-                          duration: Durations.viewerOverlayPageChooserAnimation,
-                          curve: Curves.easeOutCubic,
-                        );
-                        _syncScroll = true;
-                      },
-                      child: DecoratedThumbnail(
-                        entry: pageEntry,
-                        extent: extent,
-                        // the retrieval task queue can pile up for thumbnails of heavy pages
-                        // (e.g. thumbnails of 15MP HEIF images inside 100MB+ HEIC containers)
-                        // so we cancel these requests when possible
-                        cancellableNotifier: _cancellableNotifier,
-                        selectable: false,
-                        highlightable: false,
-                      ),
-                    );
-                  },
-                  separatorBuilder: (context, index) => separator,
-                  itemCount: multiPageInfo.pageCount + 2,
-                ),
-              ),
-              Positioned(
-                left: 0,
-                top: separatorWidth,
-                width: marginWidth + separatorWidth,
-                height: extent,
-                child: shade,
-              ),
-              Positioned(
-                top: separatorWidth,
-                right: 0,
-                width: marginWidth + separatorWidth,
-                height: extent,
-                child: shade,
-              ),
-              Positioned(
-                top: 0,
-                width: availableWidth,
-                height: separatorWidth,
-                child: shade,
-              ),
-              Positioned(
-                bottom: 0,
-                width: availableWidth,
-                height: separatorWidth,
-                child: shade,
-              ),
-            ],
+              return Stack(
+                children: [
+                  GestureDetector(
+                    onTap: () async {
+                      _syncScroll = false;
+                      controller.page = page;
+                      await _scrollController.animateTo(
+                        pageToScrollOffset(page),
+                        duration: Durations.viewerOverlayPageScrollAnimation,
+                        curve: Curves.easeOutCubic,
+                      );
+                      _syncScroll = true;
+                    },
+                    child: DecoratedThumbnail(
+                      entry: pageEntry,
+                      extent: extent,
+                      // the retrieval task queue can pile up for thumbnails of heavy pages
+                      // (e.g. thumbnails of 15MP HEIF images inside 100MB+ HEIC containers)
+                      // so we cancel these requests when possible
+                      cancellableNotifier: _cancellableNotifier,
+                      selectable: false,
+                      highlightable: false,
+                    ),
+                  ),
+                  IgnorePointer(
+                    child: AnimatedContainer(
+                      color: controller.page == page ? Colors.transparent : Colors.black45,
+                      width: extent,
+                      height: extent,
+                      duration: Durations.viewerOverlayPageShadeAnimation,
+                    ),
+                  )
+                ],
+              );
+            },
+            separatorBuilder: (context, index) => separator,
+            itemCount: multiPageInfo.pageCount + 2,
           ),
         );
       },