Bug 148872 - Centering text inside a button set to display flex and justify-content: center is impossible
Summary: Centering text inside a button set to display flex and justify-content: cente...
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Dave Hyatt
Keywords: BlinkMergeCandidate, InRadar
Depends on:
Reported: 2015-09-04 19:38 PDT by Jon Honeycutt
Modified: 2017-02-28 13:49 PST (History)
9 users (show)

See Also:

test case (403 bytes, text/html)
2015-09-04 19:38 PDT, Jon Honeycutt
no flags Details
expected result (334 bytes, text/html)
2015-09-04 19:39 PDT, Jon Honeycutt
no flags Details
Patch (8.73 KB, patch)
2017-02-28 12:53 PST, Dave Hyatt
no flags Details | Formatted Diff | Diff
Patch (8.65 KB, patch)
2017-02-28 13:04 PST, Dave Hyatt
simon.fraser: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Jon Honeycutt 2015-09-04 19:38:28 PDT
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.
Comment 1 Radar WebKit Bug Importer 2015-09-04 19:38:39 PDT
Comment 2 Jon Honeycutt 2015-09-04 19:39:15 PDT
Created attachment 260666 [details]
expected result
Comment 3 Eric Taylor 2015-10-23 11:20:55 PDT
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).
Comment 4 Eric Taylor 2015-10-23 11:45:13 PDT
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.
Comment 5 ntilwalli 2016-09-28 15:38:23 PDT
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.
Comment 6 Dave Hyatt 2017-02-28 12:53:44 PST
Created attachment 302970 [details]
Comment 7 Dave Hyatt 2017-02-28 13:04:05 PST
Created attachment 302972 [details]
Comment 8 Simon Fraser (smfr) 2017-02-28 13:31:35 PST
Comment on attachment 302972 [details]

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.
Comment 9 Dave Hyatt 2017-02-28 13:49:46 PST
Fixed in r213173.