Bug 138094 - width:-webkit-min-content ignores default image size
Summary: width:-webkit-min-content ignores default image size
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.9
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2014-10-27 09:20 PDT by Nick Manning
Modified: 2023-03-02 22:33 PST (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Nick Manning 2014-10-27 09:20:00 PDT
If you have a figure like this:
<body>
<figure>
   <img src="http://www.placehold.it/400x400"><!--Note: The image size is 400x400-->
   <figcaption>lorem ipsum etc...</figcaption>
</figure>
</body>

With this CSS:
*{margin:0px;padding:0px}
figure{width:-webkit-min-content;width:-moz-min-content;}

everything works fine, but when you want to make it responsive (meaning, when the screen is under 400 pixels wide, the image shrinks accordingly), normally this would be done by applying max-width:100% to the image, but doing this causes -webkit-min-content to ignore the image's default size and shrink it to the longest word in the fig caption. -moz-min-content works as expected.

Here is an example:

http://jsfiddle.net/ywmsp0jy/3/

(compare with firefox's behavior)

Thanks!
Comment 1 Radar WebKit Bug Importer 2014-10-28 07:24:40 PDT
<rdar://problem/18796009>
Comment 2 Ahmad Saleem 2023-02-21 13:15:11 PST
I changed the test to remove any prefixes and cleaned CSS a bit:

Link - https://jsfiddle.net/tnx2yvep/show

It is same across all browsers Chrome Canary 112, Firefox Nightly 112 and Safari Technology Preview 163.

Do we need to track it? Thanks!
Comment 3 Karl Dubost 2023-03-02 22:33:28 PST
Yes. Thanks Ahmad.