Bug 252425 - Parent’s padding affects the width of a positioned image with max-height: 100%
Summary: Parent’s padding affects the width of a positioned image with max-height: 100%
Status: RESOLVED DUPLICATE of bug 251419
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 16
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2023-02-16 13:51 PST by Vadim Makeev
Modified: 2023-02-16 20:47 PST (History)
1 user (show)

See Also:


Attachments
max-height demo (842 bytes, text/html)
2023-02-16 13:51 PST, Vadim Makeev
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Vadim Makeev 2023-02-16 13:51:07 PST
Created attachment 465032 [details]
max-height demo

Or maybe something else is happening, but look at the demo: the square should be fully green.

https://codepen.io/pepelsbey/pen/JjadGQv

div {
    position: relative;
    width: 256px;
    height: 256px;
    background-color: red;
    padding-top: 255px;
    box-sizing: border-box;
}

img {
    position: absolute;
    top: 0;
    left: 0;
    max-height: 100%;
    background-color: green;
}

The same demo is attached to the issue as an HTML file.

It’s not purely theoretical: my presentation engine got affected. I use the class "cover" to position images. Now they’re distorted only in Safari.

https://shwr.me/ — see slides with images. They should not have white padding on the sides.

It’s definitely a regression. It used to work fine for many years.
Comment 1 zalan 2023-02-16 20:43:28 PST
Thank you filing this bug report. It looks like https://codepen.io/pepelsbey/pen/JjadGQv has progressed at 259663@main.
Comment 2 zalan 2023-02-16 20:43:58 PST
let me check https://shwr.me/ too
Comment 3 zalan 2023-02-16 20:46:31 PST
yup, https://shwr.me is no longer broken. Thanks again!
Comment 4 zalan 2023-02-16 20:47:19 PST

*** This bug has been marked as a duplicate of bug 251419 ***