Skip to content

Safari icon-only buttons render incorrect dimensions #6667

@taysea

Description

@taysea

Expected Behavior

Icon only buttons should render with same dimensions as icon + label / label-only buttons.

Actual Behavior

In Safari, extra dimension is added above the svg, even though the SVG's dimension is square. This causes icon-only buttons to have different dimensions that other buttons. Depending on the theme, this effect is more dramatic than others.

URL, screen shot, or Codepen exhibiting the issue

39px button should be 36px tall according to theme.
Screen Shot 2023-03-06 at 10 08 04 AM

Screen Shot 2023-03-06 at 9 54 29 AM

Steps to Reproduce

Your Environment

  • Grommet version:
  • Browser Name and version:
  • Operating System and version (desktop or mobile):

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugissue that does not match design or documentation and requires code changes to address

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions