New issue
Advanced search Search tips

Issue 660182 link

Starred by 2 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

<button> is higher with an empty div inside than with a non-empty div inside.

Reported by dschub...@mozilla.com, Oct 27 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:52.0) Gecko/20100101 Firefox/52.0

Example URL:
http://stuff.schub.io/mozilla/testcases/compat-2888/full.html

Steps to reproduce the problem:
(test case was extracted from an actual website where we received a webcompat report for)

1. Open the mentioned URL
2. Observe that the Grey boxes do not share the same height.

What is the expected behavior?
Both boxes should be the same height.

What went wrong?
As soon as content is added to the inner <div>, the outer (Grey) box shrinks. I don't see any reason why the element should be higher if the inner div is empty.

In Firefox and Edge, the Grey box is the same height, no matter if the inner div has contents or not.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 52.0.2743.116  Channel: n/a
OS Version: OS X 10.12
Flash Version:
 

Comment 1 by tkent@chromium.org, Oct 27 2016

Components: -Blink Blink>Layout
Labels: Hotlist-Interop
Status: Untriaged (was: Unconfirmed)
Button heights look same.  Heights of div.outer are different.
Safari 10 has a similar issue.

Comment 2 by e...@chromium.org, Oct 30 2016

Cc: cbiesin...@chromium.org glebl@chromium.org
Status: Available (was: Untriaged)

Comment 3 by xing...@intel.com, Oct 31 2016

@cbiesinger, it seems currently button only support display flex/inline-flex,should we add Block support for Button?
Below patch can fix this:
--- a/third_party/WebKit/Source/core/html/HTMLButtonElement.cpp
+++ b/third_party/WebKit/Source/core/html/HTMLButtonElement.cpp
@@ -52,7 +52,10 @@ void HTMLButtonElement::setType(const AtomicString& type) {
   setAttribute(typeAttr, type);
 }

-LayoutObject* HTMLButtonElement::createLayoutObject(const ComputedStyle&) {
+LayoutObject* HTMLButtonElement::createLayoutObject(const ComputedStyle& style) {
+  EDisplay display = style.display();
+  if (display == EDisplay::Block)
+    return LayoutObject::createObject(this, style);
   return new LayoutButton(this);
 }


Sorry, why do you say that? The way this works is that <button> is a flexbox, and its children get put inside an anonymous block/flexbox. Since the anonymous child is either a block or a flexbox this should be fine. I don't think just creating a LayoutBlockFlow will lead to correct behavior?

This bug should probably be fixed in LayoutButton::baselinePosition, but requires some investigation of what other browsers do.
Project Member

Comment 5 by sheriffbot@chromium.org, Oct 31 2017

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available. If you change it back, also remove the "Hotlist-Recharge-Cold" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 6 by e...@chromium.org, Oct 31 2017

Cc: -glebl@chromium.org
Components: -Blink>Layout Blink>Layout>Flexbox
Status: Available (was: Untriaged)
Project Member

Comment 7 by sheriffbot@chromium.org, Nov 1

Status: Untriaged (was: Available)
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Status: Available (was: Untriaged)

Sign in to add a comment