| Summary: | Centering text inside a button set to display flex and justify-content: center is impossible | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Jon Honeycutt <jhoneycutt> | ||||||||||
| Component: | Layout and Rendering | Assignee: | Dave Hyatt <hyatt> | ||||||||||
| Status: | RESOLVED FIXED | ||||||||||||
| Severity: | Normal | CC: | commit-queue, erictaylor89, esprehn+autocc, glenn, hyatt, kondapallykalyan, me, ntilwalli, webkit-bug-importer | ||||||||||
| Priority: | P2 | Keywords: | BlinkMergeCandidate, InRadar | ||||||||||
| Version: | WebKit Nightly Build | ||||||||||||
| Hardware: | Unspecified | ||||||||||||
| OS: | Unspecified | ||||||||||||
| Attachments: |
|
||||||||||||
Created attachment 260666 [details]
expected result
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). 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. Created attachment 302970 [details]
Patch
Created attachment 302972 [details]
Patch
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. |
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.