Significant layout shift on media item pages

Kirby

Well-known member
Affected version
2.2.3

This might be caused by flexbox not being able to detetmine the height early enough; adding height and max-height CSS rules on div.media-container seems to fix this for me:

Code:
<xf:if is="$mediaItem.media_type === 'image'">
<xf:css>
div.media-container
{
    height: {$mediaItem.Attachment.Data.width}px;
    max-height: 80vh;
}
</xf:css>
</xf:if>
 
Top Bottom