Bug 228637 - Space too large when using icon font in ::after pseudo element
Summary: Space too large when using icon font in ::after pseudo element
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Text (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Intel) macOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-07-30 06:40 PDT by literalPie
Modified: 2021-08-27 01:17 PDT (History)
4 users (show)

See Also:

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

Note You need to log in before you can comment on or make changes to this bug.
Description literalPie 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).
Comment 1 Sam Sneddon [:gsnedders] 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.
Comment 2 literalPie 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?
Comment 3 Radar WebKit Bug Importer 2021-08-06 06:41:15 PDT 
<rdar://problem/81614996>
Comment 4 Myles C. Maxfield 2021-08-27 01:17:12 PDT 
I can't reproduce this either. I guess this should be marked as configuration changed.