Bug 246803

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:

Keywords:

BrowserCompat, InRadar

Version:

Safari 16

Hardware:

All

OS:

Unspecified

Attachments:

Description	Flags
rendering in firefox, chrome, safari	none
Safari, Chrome and Firefox rendering an image slightly differently.	none

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.