Closed Bug 975632 Opened 10 years ago Closed 8 years ago

max-width: 100%; doesn't work inside tables or display: table

Categories

(Core :: Layout: Tables, defect, P5)

Product:
Core
Component:
Layout: Tables
Type:
defect

Tracking

()

Status:
RESOLVED FIXED
Milestone:
mozilla47
Tracking Flags:
Tracking Status
firefox44 --- affected
firefox45 --- affected
firefox46 --- fixed
firefox47 --- fixed

People

(Reporter: markdotto, Unassigned, NeedInfo)

References

(Blocks 1 open bug)

Details

(Keywords: testcase)

Attachments

(1 file)

index.html
24.16 KB, text/html
Details 
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.73.11 (KHTML, like Gecko) Version/7.0.1 Safari/537.73.11

Steps to reproduce:

Place an image with `max-width: 100%;` within a table cell or an element with `display: table-cell;` and the image won't scale properly. Chrome and Safari handle this without issue.

See http://jsfiddle.net/cctyb/7/ for an example.


Actual results:

Image doesn't scale down.


Expected results:

Image should be scaled down to fit within the table cell's available space.
Component: Untriaged → Layout
Product: Firefox → Core
The width of the cell depends on the width of the image, no?  So what is the 100% supposed to be of?   You can't figure out the cell width until you pick the image width.

For what it's worth, here's what the spec has to say on the matter:

> If the containing block's width depends on this element's width, then the resulting
> layout is undefined in CSS 2.1. 

in the <percentage> section of http://www.w3.org/TR/CSS21/visudet.html#min-max-widths
Fwiw, it seems to work as intended when I style the table with 'table-layout:fixed'.
Moving the bug to Layout:Tables, but intentionally not confirming as the layout
is still undefined per CSS.
Severity: normal → minor
Component: Layout → Layout: Tables
Keywords: testcase
OS: Mac OS X → All
Priority: -- → P5
Hardware: x86 → All
Version: 27 Branch → unspecified
> Fwiw, it seems to work as intended when I style the table with 'table-layout:fixed'.

Sure, since in that case the cell's width doesn't depend on its contents.
I ran into this issue and it looks like I have a decent solution. Our table has a width of 100%. It is inside a div that has a fixed width. Therefore, our table has a max-width equal to its parent div minus margins and padding. It should be possible to calculate the max-widths of the table rows and cells based on padding and margin of those (unless any of them specify a max-width). At that point, setting the max-width of the image to 100% should use the max-width of the table cell it is in. 

Next, you render the table cells whose content size is known or can be calculated and is less than the max-width and set their widths (unless they are already set). 

Finally, you calculate the width of the table cells whose widths are not known and whose content is larger than the max-width and ensure that they are always less than the max-width.

Furthermore, this should cascade upwards and allow you to set the sizes for all of the table cells and rows correctly.

Seems like the other browsers are doing something along these lines.
> Therefore, our table has a max-width equal to its parent div minus margins and padding.

Sadly, no.  Simple testcase showing that not to be the case:

  data:text/html,<!DOCTYPE HTML><div style="width: 100px"><table style="width: 100%; border: 1px solid black"><tr><td><div style="width: 200px; height: 200px"></div></td></tr></table></div>

This is showing the table ending up wider than  your claimed max-width.
(In reply to Boris Zbarsky [:bz] from comment #7)
> Sadly, no.  Simple testcase showing that not to be the case:
> 
>   data:text/html,<!DOCTYPE HTML><div style="width: 100px"><table
> style="width: 100%; border: 1px solid black"><tr><td><div style="width:
> 200px; height: 200px"></div></td></tr></table></div>

@Boris The issue isn't trying to solve a fixed width problem. That works as expected. This is an issue with scaling using max-width. Your HTML has a fixed width and therefore isn't valid for this issue.

Also, my solution is NOT trying to prove that Firefox currently works as expected. It is an idea for how Firefox might solve this problem so that it behaves like every other browser. Firefox is the only browser with this issue currently and it prevents responsive/scaled layout that uses tables.

Just an FYI - we had to hack our product for Firefox by forcing a width on the enclosing TD that contains the IMG tag we are trying to scale.
Brian, I understand what you were trying to do  My point was that your solution ignores (common!) cases when a table contains both fixed-width and percentage-width things, because it assumes that you know the width of the table up front.  Which is not a good assumption, unfortunately.

What's really needed here is an actual specification for the behavior, because changing our behavior to something that matches other browsers in this one case but ends up further from them in other cases is not that useful, unfortunately....
@Boris my solution can be used when there are no fixed-width elements. This is a scaling issue and fixed width immediately disables scaling on those elements. Therefore, if there are no fixed widths (very common when scaling displays and being responsive), things should scale using a method like I suggested. 

Also, your earlier comment about the image's size controlling the size of the cell is incorrect I think. Image's whose max-width is 100% should always scale since max-width uses the size of the parent container, not vice versa.
I am really surprised this hasn't been fixed yet.

If you set the image width to 100% (width:100%) you get the correct results
http://jsfiddle.net/cctyb/38/

However the image can now grow larger than the max size.
Setting max-width:100% should shrink the image and keep its maximum size limits.
Blocks: 1095359
This seems to be a duplicate of Bug 434230.
Note that the different behavior in between Chrome/Safari and Firefox creates Web compatibility issues. Two weeks ago I had the same exact issue on a NTT Docomo Web site. Today on ebay with Bug 1095359.


Also Bug 1073222
Blocks: 1073222
See Also: → 434230
Depends on: 434230
Explained the Web Compat story here with screenshots
http://www.otsukare.info/2014/12/10/table-layout-fixed
It looks like this issue has been open for almost a year and it is not fixed.  My site looks fine at all view percentages on Google Chrome and Internet Explorer,  but with Foxfire my site with tables done not fill completely at of all sizes has an issue at 100% really.  I am new to Firefox and when I saw my site was not rendering properly I almost went to change it, but it looks fine in IE and Chrome...  REALLY????
Flags: needinfo?(nobody)
Attached file index.html — 
This is a testcase about the issue.
The way to fix it so it looks like the same in WebKit, Blink and Gecko is to put a "table-layout: fixed;".
I'd like to mimic Harvey Davis's sentiments. My site looks just fine in Safari and Chrome, but because of this issue, Firefox simply won't render it correctly. This issue prevents the best way of making an image align vertically and horizontally within an element whose size fluctuates from working correctly. I've tried the "table-layout: fixed;" solution, but that hasn't fixed it.

This is a pretty silly and glaring issue that really should be resolved.
Justin,

yes an issue to solve. About:

(In reply to justin.frenzeL from comment #18)
> I've tried the "table-layout: fixed;" solution, but that
> hasn't fixed it.

Could you create a reduced test case on jsfiddle or codepen on how your specific case is happening?
Or fill a bug report about your own Web site on webcompat.com at https://webcompat.com/?open=1

Thanks.
Flags: needinfo?(justin.frenzeL)
I can confirm this bug.
I have reported it at: http://webcompat.com/issues/737
Blocks: 1140699
Blocks: 1169927
See also this comment on a reduced markup with blown out images in a very specific corner case.
https://github.com/webcompat/web-bugs/issues/1111#issuecomment-107810945

The image becomes 5965230px (yes almost 6 millions pixels)
See Also: 434230 → 
Here is a minimum fiddle, based on the 200px image from Mark Otto.
http://jsfiddle.net/hzngg2n6/1/

It displays differently in Firefox (39.0.3) and Chromium (44.0.2403.130 (64-bit)).
(on Manjaro Linux)
The display: table, in our case, is needed for a trick with table-caption, so the image legend gets the same width as the image.
And table-layout: fixed does not have any effect.
http://jsfiddle.net/hzngg2n6/2/
width: 100% instead of min-width: 100% on the image does seem to help, even if the image is smaller than the container.
http://jsfiddle.net/hzngg2n6/3/
And even with a legend.
http://jsfiddle.net/hzngg2n6/4/
Sorry, I did not realize that the fiddle by Mark Otto contains bootstrap. Duh.

This is the correct fiddle with explicit width: 100% on the image, and legend:
http://jsfiddle.net/m7a07p1y/

And here with min-width: 100% on the image:
http://jsfiddle.net/ov3158zj/
(In reply to Andreas Hennings from comment #26)
> And table-layout: fixed does not have any effect.
> http://jsfiddle.net/hzngg2n6/2/

AFAIK, you have to specify the table's width for table-layout: fixed to take effect (and yes, I know, if the 'right' width is known in advance, usually you don't need display: table either ...)
(In reply to Andreas Hennings from comment #27)
> width: 100% instead of min-width: 100% on the image does seem to help, even
> if the image is smaller than the container.

Interesting. You find that FF treats an image's percentage width as max-width within a container with intrinsic width (display: inline-block|table, float: left|right etc.). With no guidance from the spec, is this a de facto standard among browsers? As far as I can see, IE 11 behaves the same as FF but didn't test Webkit (Chrome, Safari & co.).

If browsers behave consistently, this is an amazingly simple (de facto) workaround to enforce images' max-width within tables: just replace "max-width: 100%" with "width: 100%" and you're done.
Francesco  "width: 100%" creates issues when the space becomes larger than the intrinsic width. The images become pixellated. So it seems to work but it's not a good solution. We have a different behavior compared to Blink and WebKit and we need to fix that. It creates a lot of Web Compat issues.
No longer blocks: 1095359
</style>
.list {
  margin: 10px 0;
  padding: 10px;
  display: table;
  table-layout: fixed;
  width: 100%;
}
.list-item img{
  display: table-cell;
  width: 100%;
  height: 200px;
  vertical-align: middle;
}
.list-item {
  margin: 0 auto;
  display: block;
  max-width: 100%;
  max-height: 200px;
}
</style>


<div class="col-md-4">
  <div class="list">
    <div class="list-item">
      <img src="images/bla.jpg"/>
    </div>
  </div>
</div>


Guyz try this one. It works...
Blocks: 1230801
(In reply to Navas CA from comment #32)

> Guyz try this one. It works...

If you want to use width:100% in place of max-width:100% you must be sure that the parent's width cannot be greater than the image's width, for instance by replacing <img style="max-width:100%;" ...> with

<span style="display:inline-block;">
  <img style="width:100%;" ...>
</span>
Sorry guyz...small correction..


<style>
.list {
  margin: 10px 0;
  padding: 10px;
  display: table;
  table-layout: fixed;
  width: 100%;
}
.list-item {
  display: table-cell;
  width: 100%;
  height: 200px;
  vertical-align: middle;
}
.list-item img{
  margin: 0 auto;
  display: block;
  max-width: 100%;
  max-height: 200px;
}
</style>


<div class="col-md-4">
  <div class="list">
    <div class="list-item">
      <img src="images/bla.jpg"/>
    </div>
  </div>
</div>


Guyz try this one. It works...
Flags: needinfo?(navasshareif)
Flags: needinfo?(navasshareif)
Based on testcase in comment 0, fixed by bug 823483.
Status: UNCONFIRMED → RESOLVED
Closed: 8 years ago
Depends on: 823483
Resolution: --- → FIXED
No longer blocks: 1140699
I can confirm that this issue is still NOT fixed.

I am working on fixing a Firefox specific display bug on http://www.houseofq.com/products/bbq-sauces/ and been banging my head against a brick wall trying to find some code that would resolve this issue. After finding this bug report I can only conclude that this issue is still active.

The above page has a table near the top that overflows a containing div element causing contents to overlap each other. I have viewed this page in Chrome where it displays as expected. The table is using dynamic image sizing. Based on the results of my attempts to fix this issue, it appears that the table is being rendered at the combined widths of all 4 images, plus any padding, borders and margins between cells and between the table itself and the other elements.

In Chrome both the images and containing table will adjust their size dynamically as per W3 CSS standards.

I have tested this issue in Firefox 42.0, 43.0.1 and 44.0.2 and in Chrome 48.0.2564.116 m.

In all 3 versions of Firefox, this bug remains present, but in Chrome, the table behaves as expected.
Jason, this bug is fixed by the fix for bug 823483 which was checked into the development tree for Firefox 47 and then backported to Firefox 46.  So unless you're testing a current developer edition (Firefox 46) or nightly (Firefox 47) build, you should expect to see this bug.  Are you seeing this problem in developer edition or nightly?
Target Milestone: --- → mozilla47
(In reply to Boris Zbarsky [:bz] from comment #37)
> Jason, this bug is fixed by the fix for bug 823483 which was checked into
> the development tree for Firefox 47 and then backported to Firefox 46.  So
> unless you're testing a current developer edition (Firefox 46) or nightly
> (Firefox 47) build, you should expect to see this bug.  Are you seeing this
> problem in developer edition or nightly?

I was running into this exact same issue.  I installed Firefox Developer(46) and verified that the issue is indeed fixed!  Now I just have to wait another month for 46 to be released.  Thanks devs!!
You need to log in before you can comment on or make changes to this bug.