From 7e9e9377426dd7dfc38925f5a1fca4a8ca6d70ad Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 2 Nov 2020 11:16:35 +0100
Subject: [PATCH] IE11 doesn't calculate padding percentages based on parent
 width in grid

so do progressive fallback. This won't scale the height of the
image tile height, but it will still scale the thumbnail
on narrow viewports, leaving a blank space underneath the image.
---
 src/platform/web/ui/css/themes/element/theme.css    |  7 +++++--
 .../web/ui/session/room/timeline/ImageView.js       | 13 ++++++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index ff841a61..8a55e7dd 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -543,9 +543,7 @@ ul.Timeline > li.messageStatus .message-container > p {
 .message-container .picture {
     display: grid;
     text-decoration: none;
-    overflow: hidden;
     margin-top: 4px;
-    border-radius: 4px;
     width: 100%;
 }
 
@@ -559,6 +557,9 @@ so the timeline doesn't jump when the image loads */
 .message-container .picture > img {
     width: 100%;
     height: auto;
+    /* for IE11 to still scale even though the spacer is too tall */
+    align-self: start;
+    border-radius: 4px;
 }
 
 .message-container .picture > time {
@@ -572,7 +573,9 @@ so the timeline doesn't jump when the image loads */
     border-radius: 4px;
 }
 .message-container .picture > .spacer {
+    /* TODO: can we implement this with a pseudo element? or perhaps they are not grid items? */
     width: 100%;
+    align-self: start;
 }
 
 .TextMessageView.pending .message-container {
diff --git a/src/platform/web/ui/session/room/timeline/ImageView.js b/src/platform/web/ui/session/room/timeline/ImageView.js
index 00669a55..eb060e34 100644
--- a/src/platform/web/ui/session/room/timeline/ImageView.js
+++ b/src/platform/web/ui/session/room/timeline/ImageView.js
@@ -20,9 +20,20 @@ import {renderMessage} from "./common.js";
 export class ImageView extends TemplateView {
     render(t, vm) {
         const heightRatioPercent = (vm.thumbnailHeight / vm.thumbnailWidth) * 100; 
+        let spacerStyle = `padding-top: ${heightRatioPercent}%;`;
+        if (vm.platform.isIE11) {
+            // preserving aspect-ratio in a grid with padding percentages
+            // does not work in IE11, so we assume people won't use it
+            // with viewports narrower than 400px where thumbnails will get
+            // scaled. If they do, the thumbnail will still scale, but
+            // there will be whitespace underneath the picture
+            // An alternative would be to use position: absolute but that
+            // can slow down rendering, and was bleeding through the lightbox.
+            spacerStyle = `height: ${vm.thumbnailHeight}px`;
+        }
         return renderMessage(t, vm, [
             t.a({href: vm.lightboxUrl, className: "picture", style: `max-width: ${vm.thumbnailWidth}px`}, [
-                t.div({className: "spacer", style: `padding-top: ${heightRatioPercent}%;`}),
+                t.div({className: "spacer", style: spacerStyle}),
                 t.img({
                     loading: "lazy",
                     src: vm => vm.thumbnailUrl,