imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix some image/video scroll jumps (#8182)

Browse source 
* Fix some image/video scroll jumps

* Fix aspect ratio formatting

* Fix videos not being responsive to timeline width
This commit is contained in:
Robin 2022-03-28 15:07:02 -04:00 • committed by GitHub
parent afa60acbf1
commit af6bd63ac7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 90 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

44
res/css/views/messages/_MImageBody.scss
View file

@ -17,40 +17,42 @@ limitations under the License.
$timeline-image-border-radius: 8px;
.mx_MImageBody_thumbnail--blurhash {
.mx_MImageBody_placeholder {
// Position the placeholder on top of the thumbnail, so that the reveal animation can work
position: absolute;
left: 0;
top: 0;
}
.mx_MImageBody_thumbnail {
object-fit: contain;
border-radius: $timeline-image-border-radius;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
// this is needed so that the Blurhash can get have rounded corners without beeing the correct size during loading.
overflow: hidden;
background-color: $background;
.mx_Blurhash > canvas {
animation: mx--anim-pulse 1.75s infinite cubic-bezier(.4, 0, .6, 1);
}
.mx_no-image-placeholder {
background-color: $primary-content;
}
}
.mx_MImageBody_thumbnail_container {
// Prevent the padding-bottom (added inline in MImageBody.js) from
// affecting elements below the container.
overflow: hidden;
border-radius: $timeline-image-border-radius;
// Make sure the _thumbnail is positioned relative to the _container
position: relative;
// Necessary for the border radius to apply correctly to the placeholder
overflow: hidden;
contain: paint;
}
.mx_MImageBody_thumbnail {
display: block;
// Force the image to be the full size of the container, even if the
// pixel size is smaller. The problem here is that we don't know what
// thumbnail size the HS is going to give us, but we have to commit to
// a container size immediately and not change it when the image loads
// or we'll get a scroll jump (or have to leave blank space).
// This will obviously result in an upscaled image which will be a bit
// blurry. The best fix would be for the HS to advertise what size thumbnails
// it guarantees to produce.
height: 100%;
width: 100%;
}
.mx_MImageBody_gifLabel {