Bug 246803

Summary: max-height not applied when `min-height: min-content` is applied
Product: WebKit Reporter: Matthew Bidewell <matthewbidewell>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Minor CC: ap, bfulgham, karlcow, koivisto, simon.fraser, webkit-bug-importer, zalan
Priority: P4 Keywords: BrowserCompat, InRadar, NeedsReduction
Version: Safari 16   
Hardware: All   
OS: Unspecified   
Description Flags
rendering in firefox, chrome, safari
Safari, Chrome and Firefox rendering an image slightly differently. none

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