better

web/apps/cast/src/components/Slide.tsx

@@ -1,3 +1,5 @@
+import { styled } from "@mui/material";
+
 interface SlideViewProps {
     /** The URL of the image to show. */
     url: string;
@@ -13,19 +15,9 @@ interface SlideViewProps {
  */
 export const SlideView: React.FC<SlideViewProps> = ({ url, nextURL }) => {
     return (
-        <div
+        <Container
             style={{
-                width: "100vw",
-                height: "100vh",
                 backgroundImage: `url(${url})`,
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-                backgroundRepeat: "no-repeat",
-                backgroundBlendMode: "multiply",
-                backgroundColor: "rgba(0, 0, 0, 0.5)",
-                // Smooth out the transition a bit.
-                // Does not work in Firefox.
-                transition: "background 2s",
             }}
         >
             <div
@@ -55,6 +47,32 @@ export const SlideView: React.FC<SlideViewProps> = ({ url, nextURL }) => {
                     }}
                 />
             </div>
-        </div>
+        </Container>
     );
 };
+
+const Container = styled("div")`
+    width: 100%;
+    height: 100%;
+    /* backgroundImage: url({url}), */
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-blend-mode: multiply;
+    background-color: rgba(0, 0, 0, 0.5);
+    /* Smooth out the transition a bit.
+     *
+     * For the img itself, we set decoding="sync" to have it switch seamlessly.
+     * But there does not seem to be a way of setting decoding sync for the
+     * background image, and for large (multi-MB) images the background image
+     * switch is still visually non-atomic.
+     *
+     * As a workaround, add a long transition so that the background image
+     * transitions in a more "fade-across" manner. This effect might or might
+     * not be visually the best though.
+     *
+     * Does not work in Firefox, but that's fine, this is only a slight tweak,
+     * not a functional requirement.
+     */
+    transition: all 2s;
+`;