| Summary: | max-height not applied when `min-height: min-content` is applied | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Matthew Bidewell <matthewbidewell> | ||||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | NEW --- | ||||||||
| Severity: | Minor | CC: | ahmad.saleem792, ap, bfulgham, karlcow, koivisto, simon.fraser, webkit-bug-importer, zalan | ||||||
| Priority: | P4 | Keywords: | BrowserCompat, InRadar | ||||||
| Version: | Safari 16 | ||||||||
| Hardware: | All | ||||||||
| OS: | Unspecified | ||||||||
| Attachments: |
|
||||||||
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. 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. Created attachment 463119 [details]
Safari, Chrome and Firefox rendering an image slightly differently.
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. ``` 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. 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. 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. |
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