Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui5-icon alignment issue in Safari #913

Closed
RubenStoesser opened this issue Nov 7, 2019 · 1 comment · Fixed by #2746
Closed

ui5-icon alignment issue in Safari #913

RubenStoesser opened this issue Nov 7, 2019 · 1 comment · Fixed by #2746
Assignees
Labels
bug This issue is a bug in the code Low Prio TOPIC P

Comments

@RubenStoesser
Copy link

Describe the bug
When reducing the size of a ui5-icon the alignment of the SVG within it's container breaks in Safari. The issue is not present in Chrome & Firefox.

Adding "vertical-align: top" to the SVG icon element seemingly fixes the issue and has no negative effect in Chrome & Firefox but I didn't thoroughly test this.

To reproduce
Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/s/ui5-webcomponents-pbulf
  2. Works in Chrome & FF, icon alignment wrong in Safari

Isolated example
https://codesandbox.io/s/ui5-webcomponents-pbulf

Expected behavior
Icon alignment should be consistent across browsers

Screenshots
Chrome:
chrome-icon-bug
Safari:
safari-icon-bug

Context

  • UI5 Web Components version: 1.0.0.rc-4
  • OS/Platform: Mac OSX
  • Browser: Safari 13.0.2

Affected components (if known)
Icon

@MapTo0
Copy link
Member

MapTo0 commented Mar 13, 2020

I managed to workaround that by setting line-height: 10px I still have no idea why this happens in safari. I will need some more time to debug.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug This issue is a bug in the code Low Prio TOPIC P
Projects
Status: Completed
Development

Successfully merging a pull request may close this issue.

4 participants