Bug 148872 – Centering text inside a button set to display flex and justify-content: center is impossible

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Jon Honeycutt]

Created attachment 260665 [details]
test case

Centering text inside a button set to display flex and justify-content: center is impossible. Test cases come from crbug.com/344733.

[Radar WebKit Bug Importer]

<rdar://problem/22590086>

[Jon Honeycutt]

Created attachment 260666 [details]
expected result

[Eric Taylor]

This bug also effects input elements as well.

Setting display: flex; and justify-content: center; on either element will result in the element not being a flexbox and the inner text aligns left and not centered.

Currently my workaround is to target Safari specifically and set display: -webkit-box; which fixes the issue and I get the expected result.

Safari and iOS are the ONLY browsers I have this issue on. I have tested and I get the expected result from latest:

- Chrome
- Firefox
- IE 10
- Microsoft Edge
- Opera

It would be nice if this could be fixed to match every other browser out there.

P.S. This bug still exists on latest nightly (WebKit r191494).

[Eric Taylor]

Ignore my comment about setting -webkit-box fixing, just realized that's the same as setting display:block.

So it looks like there is indeed NO way to properly set flexbox on button or input elements.

Please fix this issue. I just encountered this for a button element. I worked around it by adding a div as a child and then doing the flex-box work within that.

[Dave Hyatt]

Created attachment 302970 [details]
Patch

[Dave Hyatt]

Created attachment 302972 [details]
Patch

[Simon Fraser (smfr)]

Comment on attachment 302972 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=302972&action=review

> Source/WebCore/rendering/RenderButton.h:55
> +    void updateAnonymousChildStyle(const RenderObject& anonymousChild, RenderStyle&) const override;

Can this be private?

> LayoutTests/fast/forms/button-set-display-flex-justifyContent-center.html:14
> +<h4>Test for crbug.com/344733: Centering text inside a button set to display flex and justify-content: center is impossible</h4>

Let's not reference Test for crbug.com/344733 here.

[Dave Hyatt]

Fixed in r213173.