Bug 185131

Summary:

button text not centered

Product:

WebKit

Reporter:

davidmaxwaterman

Component:

New Bugs

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED INVALID

Severity:

Normal

CC:

davmillar

Priority:

Version:

Safari 11

Hardware:

iPhone / iPad

OS:

Unspecified

Attachments:

Description	Flags
Screengrab from Chrome 65 on Linux	none

davidmaxwaterman

Reported 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.

Attachments
Screengrab from Chrome 65 on Linux (31.15 KB, image/png) 2018-05-01 00:28 PDT, David Millar	no flags	Details
View All Add attachment proposed patch, testcase, etc.

David Millar

Comment 1 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.

davidmaxwaterman

Comment 2 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.

Note You need to log in before you can comment on or make changes to this bug.