NEW 216617
css pseudo element on <button> shifts button 
https://bugs.webkit.org/show_bug.cgi?id=216617
Summary css pseudo element on <button> shifts button
Kyle
Reported 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> """
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2020-09-16 13:27:52 PDT
<rdar://problem/69010390>
Note You need to log in before you can comment on or make changes to this bug.