NEW246803
max-height not applied when `min-height: min-content` is applied 
https://bugs.webkit.org/show_bug.cgi?id=246803
Summary max-height not applied when `min-height: min-content` is applied
Matthew Bidewell
Reported 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.1.25.9.10, 17614) For a code repo example see - https://github.com/MattBidewell/min-content-max-content-bug
Attachments
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
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 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.
Alexey Proskuryakov
Comment 2 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.
Matthew Bidewell
Comment 3 2022-10-20 08:49:20 PDT
Created attachment 463119 [details] Safari, Chrome and Firefox rendering an image slightly differently.
Matthew Bidewell
Comment 4 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.
Karl Dubost
Comment 5 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.
Karl Dubost
Comment 6 2022-10-20 09:23:53 PDT
another test is data:text/html,<!doctype%20html><meta%20charset="utf-8"><title>test</title><img%20src="https://github.com/MattBidewell/min-content-max-content-bug/blob/main/assets/avatar.png?raw=true"%20style="max-height:150px;min-height:min-content"> aka max-height:150px; min-height:300px; when the minimum height is bigger than the maximum height. In this case the 3 browsers apply the same height aka 300px.
Radar WebKit Bug Importer
Comment 7 2022-10-27 07:28:18 PDT
<rdar://problem/101633593>
Ahmad Saleem
Comment 8 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.
Note You need to log in before you can comment on or make changes to this bug.