Bug 252425 – Parent’s padding affects the width of a positioned image with max-height: 100%

• Component: CSS
• Status: RESOLVED DUPLICATE

[Vadim Makeev]

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.

[alan]

Thank you filing this bug report. It looks like https://codepen.io/pepelsbey/pen/JjadGQv has progressed at 259663@main.

[alan]

let me check https://shwr.me/ too

[alan]

yup, https://shwr.me is no longer broken. Thanks again!

[alan]

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