Bug 216617 - css pseudo element on <button> shifts button
Summary: css pseudo element on <button> shifts button
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: Safari 13
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-09-16 12:44 PDT by Kyle
Modified: 2020-09-16 13:27 PDT (History)
6 users (show)

See Also:

Attachments
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 Kyle 2020-09-16 12:44:50 PDT 
Problem: Upon pseudo class activation (hover, focus, or active), the pseudo element (before or after) causes the button to offset as if it was positioned absolute. It looks like it offsets half the button height.

This issue only happens when there are multiple buttons next to each other with the same styles. See snippet for example. This was found on Safari 13 and 14 beta.



Snippet:
"""
<!doctype html>
<html>
<head>
    <style>
        .a {
            width: 48px;
            height: 48px;
        }
        .a:focus:before {
            content: '';
        }
    </style>
</head>
<body>
<button class="a"></button>
<button class="a"></button>
</body>
</html>
"""
Comment 1 Radar WebKit Bug Importer 2020-09-16 13:27:52 PDT 
<rdar://problem/69010390>