[Webkit-unassigned] [Bug 216617] New: css pseudo element on <button> shifts button

Wed Sep 16 12:44:50 PDT 2020

https://bugs.webkit.org/show_bug.cgi?id=216617

            Bug ID: 216617
           Summary: css pseudo element on <button> shifts button
           Product: WebKit
           Version: Safari 13
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: kkroboth at cainc.com

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>
"""

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200916/1be28700/attachment-0001.htm>