| Summary: | css pseudo element on <button> shifts button | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Kyle <kkroboth> |
| Component: | Forms | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | cdumez, pxlcoder, simon.fraser, webkit-bug-importer, wenson_hsieh, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 13 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
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> """