From 38628e4c972144b1f2ab286a99a279b00b30440f Mon Sep 17 00:00:00 2001
From: Kovid Goyal <kovid@kovidgoyal.net>
Date: Sun, 22 Jun 2025 09:48:01 +0530
Subject: [PATCH] E-book viewer: Fix a regression in 8.4 that broke fading of
 the background image. Fixes #2115057 [image fade in styles does not
 work](https://bugs.launchpad.net/calibre/+bug/2115057)

---
 src/pyj/read_book/settings.pyj |  3 +--
 src/pyj/read_book/view.pyj     | 15 +++++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/pyj/read_book/settings.pyj b/src/pyj/read_book/settings.pyj
index eb32b302dc..cdc178517b 100644
--- a/src/pyj/read_book/settings.pyj
+++ b/src/pyj/read_book/settings.pyj
@@ -12,7 +12,6 @@ opts = {}
 def update_settings(settings):
     settings = Object.assign({}, session_defaults(), settings)
     opts.base_font_size = max(8, min(settings.base_font_size, 64))
-    opts.bg_image_fade = settings.bg_image_fade or 'transparent'
     opts.color_scheme = settings.color_scheme
     opts.columns_per_screen = settings.columns_per_screen
     opts.cover_preserve_aspect_ratio = v'!!settings.cover_preserve_aspect_ratio'
@@ -71,7 +70,7 @@ def apply_colors(is_content_popup):
         # set background color to transparent so that the users background
         # color which is set on the iframe is used instead
         elem.style.backgroundColor = 'transparent'
-    des.backgroundColor = opts.bg_image_fade
+    des.backgroundColor = 'transparent'
     ss = document.getElementById('calibre-color-scheme-style-overrides')
     if not ss:
         ss = E.style(id=styles_id, type='text/css')
diff --git a/src/pyj/read_book/view.pyj b/src/pyj/read_book/view.pyj
index e0a516e2fc..ab1a2fefcc 100644
--- a/src/pyj/read_book/view.pyj
+++ b/src/pyj/read_book/view.pyj
@@ -856,6 +856,15 @@ class View:
         bg_image = sd.get('background_image')
         if bg_image:
             s.backgroundImage = f'url({modify_background_image_url_for_fetch(bg_image)})'
+            fade = int(sd.get('background_image_fade'))
+            if fade > 0:
+                rgba = cached_color_to_rgba(ans.background)
+                bg_image_fade = f'rgba({rgba[0]}, {rgba[1]}, {rgba[2]}, {fade/100})'
+                iframe.parentNode.style.backgroundColor = bg_image_fade
+                for which in 'left right'.split(' '):
+                    ms = document.getElementById(f'book-{which}-margin').style
+                    if ms.backgroundColor is 'transparent':
+                        ms.backgroundColor = bg_image_fade
         else:
             s.backgroundColor = ans.background or 'white'
             s.backgroundImage = 'none'
@@ -1024,12 +1033,7 @@ class View:
 
     def iframe_settings(self, name):
         sd = get_session_data()
-        bg_image_fade = 'transparent'
         cs = self.apply_color_scheme()
-        fade = int(sd.get('background_image_fade'))
-        rgba = cached_color_to_rgba(cs.background)
-        if self.iframe.style.backgroundImage is not 'none' and fade > 0:
-            bg_image_fade = f'rgba({rgba[0]}, {rgba[1]}, {rgba[2]}, {fade/100})'
         return {
             'margin_left': 0 if name is self.book.manifest.title_page_name else sd.get('margin_left'),
             'margin_right': 0 if name is self.book.manifest.title_page_name else sd.get('margin_right'),
@@ -1040,7 +1044,6 @@ class View:
             'color_scheme': cs,
             'override_book_colors': sd.get('override_book_colors'),
             'is_dark_theme': cs.is_dark_theme,
-            'bg_image_fade': bg_image_fade,
             'base_font_size': sd.get('base_font_size'),
             'user_stylesheet': sd.get('user_stylesheet'),
             'keyboard_shortcuts': sd.get('keyboard_shortcuts'),