mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

IE11 doesn't calculate padding percentages based on parent width in grid

Browse source 
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.
This commit is contained in:
Bruno Windels 2020-11-02 11:16:35 +01:00
parent fbbdaf7dfa
commit 7e9e937742
2 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/platform/web/ui/css/themes/element/theme.css
View file

@ -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 {

13
src/platform/web/ui/session/room/timeline/ImageView.js
View file

@ -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,