Bug 185131

Summary: button text not centered
Product: WebKit Reporter: davidmaxwaterman
Component: New BugsAssignee: Nobody <webkit-unassigned>
Status: RESOLVED INVALID    
Severity: Normal CC: davmillar
Priority: P2    
Version: Safari 11   
Hardware: iPhone / iPad   
OS: Unspecified   
Attachments:
Description Flags
Screengrab from Chrome 65 on Linux none

Description davidmaxwaterman 2018-04-30 08:12:47 PDT
Test case:

https://jsbin.com/xapisi/edit?html,output

On mobile safari (on iOS 11.3.1), the text is slightly offset, as if its left side is centered, rather than its center.

On desktop safari and other platforms, it centered as expected.
Comment 1 David Millar 2018-05-01 00:28:11 PDT
Created attachment 339192 [details]
Screengrab from Chrome 65 on Linux

I believe this is expected behavior, as shown in the attached screengrab from Chrome 65 on Fedora Linux. When the text horizontally overflows the bounds of the element, text-align is thrown out the window.

In your case, I'm guessing the extra padding on iOS buttons caused you to run into the issue sooner than on desktop browsers. You should be able to work around that by explicitly removing the padding from your button.
Comment 2 davidmaxwaterman 2018-05-01 01:45:38 PDT
Yes, removing the padding works for me. I guess it was just because it only happens on iOS that threw me.

Anyway, thanks for the solution.

I guess this means this 'bug' is resolved/invalid, so marking as such.