Bug 228637

Summary:

Space too large when using icon font in ::after pseudo element

Product:

WebKit

Reporter:

literalPie <benjaminkindle>

Component:

Text

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

gsnedders, mmaxfield, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Mac (Intel)

OS:

macOS 11

Attachments:

Description	Flags
Icon in ::after pseudo element	none

literalPie

Reported 2021-07-30 06:40:08 PDT

Created attachment 434620 [details] Icon in ::after pseudo element Safari has different behavior from other browsers when displaying an icon with a space in a ::after pseudo element. When there is an element with `::after { content: ' icon_name'}`, most browsers add a small space before the icon, but Safari adds a large space. This seems to only be the case when the icon font used has a "zero" character with a width (normally used for the "ch" unit).

Attachments
Icon in ::after pseudo element (740 bytes, text/html) 2021-07-30 06:40 PDT, literalPie	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Sam Sneddon [:gsnedders]

Comment 1 2021-07-30 07:06:01 PDT

What version/OS are you on, literalPie? I can't reproduce this on macOS 12 with ToT WebKit.

literalPie

Comment 2 2021-07-30 08:52:15 PDT

I am on macOS 11.5.1, and I am seeing the issue in * Safari Version 14.1.2 (16611.3.10.1.3) as well as * Safari Technology preview Release 128 (Safari 15.0, WebKit 16612.1.22.11.3) However, I just checked and I am _not_ seeing the issue in iOS 15 Beta 4, so maybe it is fixed in the beta OSes?

Radar WebKit Bug Importer

Comment 3 2021-08-06 06:41:15 PDT

<rdar://problem/81614996>

Myles C. Maxfield

Comment 4 2021-08-27 01:17:12 PDT

I can't reproduce this either. I guess this should be marked as configuration changed.

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