Closed Bug 1244192 Opened 5 years ago Closed 5 years ago

"max-width: 100%" on a padded inline-block produces different sizing on its child, depending on whether child uses "max-width" or "width"

Categories

(Core :: Layout, defect)

defect
Not set
normal

Tracking

()

RESOLVED FIXED
mozilla47
Tracking Status
firefox45 --- affected
firefox46 --- fixed
firefox47 --- fixed

People

(Reporter: dholbert, Unassigned)

References

Details

Attachments

(1 file)

Attached file testcase 1
STR:
 1. Load attached testcase (which includes 4 examples)
 2. Look at the final example (labeled "max-width: 100% on parent and child")

EXPECTED RESULTS:
Red-bordered area should not overflow the black-bordered container. (i.e. the inline-block should end up with a border-box that's 100px wide)

ACTUAL RESULTS:
Orange overflows (i.e. the inline-block ends up with a border-box that's 100px + 40px of padding + 2px of border wide.)


To be honest I'm not 100% sure what's correct here, but browsers are inconsistent. Details to follow.
Browsers seem to agree on the first, second, and third examples in the testcase. (Wide, wide, skinny)

But the final example (max-width: 100% on parent and child) they disagree.

* Firefox & IE11 render it as wide.
* Chrome 49, Safari 9, and Edge render it as skinny.

So we're the odd one out, among modern browsers, in our rendering of this testcase.  So even if we're correct (again, not sure), we might be forced to align with the others for compat reasons. (which might be why Edge is different from IE11)
This inconsistency between browsers was the root cause of at least one webcompat issue -- see https://github.com/webcompat/web-bugs/issues/1160#issuecomment-176857421
Wondering if it's not something in the same family as Bug 823483
Fixed by bug 823483.
Status: NEW → RESOLVED
Closed: 5 years ago
Depends on: 823483
Resolution: --- → FIXED
Target Milestone: --- → mozilla47
Hi,

It seems that from version 46 images with the max-with = 100% attribute no longer appears in table in this case

<td>
  <a href="javascript:void(0)" onclick="clickEditButton()" title="Éditer">
   <img src="/media/system/images/edit.png" alt="Éditer"></a>
</td>
Anthony, 

thanks do you have an example somewhere we could test?
No, because a login is necessary to access to that page.

I managed to display the image by editing the css :

#jevents_body td.buttonheading img 
{ max-width: none; }

<td class="buttonheading" align="right" width="20">
 <a href="javascript:void(0)" onclick="clickEditButton()" title="Éditer">
     	<img src="/media/system/images/edit.png" alt="Éditer"></a>
</td>
You need to log in before you can comment on or make changes to this bug.