Bug 246803 - max-height not applied when `min-height: min-content` is applied
Summary: max-height not applied when `min-height: min-content` is applied
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 16
Hardware: All Unspecified
: P4 Minor
Assignee: Nobody
Keywords: BrowserCompat, InRadar
Depends on:
Reported: 2022-10-20 07:27 PDT by Matthew Bidewell
Modified: 2023-07-04 06:07 PDT (History)
8 users (show)

See Also:

rendering in firefox, chrome, safari (798.47 KB, image/png)
2022-10-20 08:36 PDT, Karl Dubost
no flags Details
Safari, Chrome and Firefox rendering an image slightly differently. (192.63 KB, image/png)
2022-10-20 08:49 PDT, Matthew Bidewell
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Matthew Bidewell 2022-10-20 07:27:36 PDT
The following style rules when applied to an img tag generate different outputs depending on the browser.

In Chromium and Firefox browsers the img is displayed at 150px by 150px.
In Webkit based browsers its displayed at 800px by 800px.

img {
    max-height: 150px;
    min-height: min-content;

Tested versions;
Versions and OS:

OS: macOS Monterey
Safari: Version 16.0 (17614., 17614)

For a code repo example see - https://github.com/MattBidewell/min-content-max-content-bug
Comment 1 Karl Dubost 2022-10-20 08:36:01 PDT
Created attachment 463117 [details]
rendering in firefox, chrome, safari

Thanks for the bug report.

data:text/html,<!doctype html><meta charset="utf-8"><title>test</title><img src="https://github.com/MattBidewell/min-content-max-content-bug/blob/main/assets/avatar.png?raw=true" style="max-height:150px;max-height:min-content">

No differences. That seems to work the same anywhere. 

Tested on macOS 13.0
Safari Technology Preview  156/16.4      18615.1.8.5
Firefox Nightly            108.0a1       10822.10.18
Google Chrome Canary       109.0.5370.0  5370.0

I can't reproduce.
Comment 2 Alexey Proskuryakov 2022-10-20 08:45:26 PDT
This does reproduce as described when opening the test as downloaded from GitHub though. I downloaded the repo as .zip, unpacked, opened index.html in the browser.
Comment 3 Matthew Bidewell 2022-10-20 08:49:20 PDT
Created attachment 463119 [details]
Safari, Chrome and Firefox rendering an image slightly differently.
Comment 4 Matthew Bidewell 2022-10-20 08:50:53 PDT
Interestingly it only happens when the styles are applied from a style tag and not when they're inline. I added an attachment for clarification of what I see.

Just to note - When I apply the styles inline, I get the 800x800 larger image across all browsers, pretty cool.
Comment 5 Karl Dubost 2022-10-20 09:09:22 PDT
data:text/html,<!doctype html><meta charset="utf-8"><title>test</title><img src="https://github.com/MattBidewell/min-content-max-content-bug/blob/main/assets/avatar.png?raw=true" style="max-height:150px;min-height:min-content">

My bad. I did a typo in the previous test.
Let me obsolete my screenshot.
Comment 6 Karl Dubost 2022-10-20 09:23:53 PDT
another test is 




when the minimum height is bigger than the maximum height.
In this case the 3 browsers apply the same height aka 300px.
Comment 7 Radar WebKit Bug Importer 2022-10-27 07:28:18 PDT
Comment 8 Ahmad Saleem 2023-07-04 06:07:23 PDT
Removing 'Needs Reduction' because we have it and it is reproducible in WebKit ToT using:

data:text/html,<!doctype html><meta charset="utf-8"><title>test</title><img src="https://github.com/MattBidewell/min-content-max-content-bug/blob/main/assets/avatar.png?raw=true%22%20style=%22max-height:150px;min-height:min-content%22%3E

From Comment 06.