Icons no longer show in Safari on a Mac

[jonnymuir]

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

"version": "1.0.0"

Bug summary

Icons no are no longer visible on Safari (I am on Version 18.3 -20620.2.4.11.5)

Specifics

It is because the SVG underneath is now rendered as width and height of 0 due the :host display changed on the component with the following commit:

69520c6

Works ok in chrome on a Mac. Just safari.

Steps to reproduce

Download latest.

Open vscode and use dev container.

npm run storybook

Go to the default icon

http://localhost:6007/?path=/story/uui-icon--default

(Or whatever port docker is using).

It isn't visible on Mac Safari - because the svg has 0 height / width.

Change the display-inline back to display-block and it appears again:

Not sure if the original centring fix is still fixed? I think probably, would need to know why it was changed to inline-flex

Expected result / actual result

No response

[bjarnef]

Safari is odd when it comes to flexbox - often different from most other browsers 😅 although it seems it should be supported in Safari as well https://caniuse.com/mdn-css_properties_display_inline-flex

Does it help using this?
https://stackoverflow.com/a/27138032

display: -webkit-inline-flex;
display: inline-flex;

[jonnymuir]

Hi Bjarne - yes you are right Safari is a bit odd! You are right in that flexbox is (now) well supported without vender specific prefixes (the suggestion on the link didn't make any difference).

It appears to be an oddity of how svgs and flexblox are interacting on safari. https://stackoverflow.com/questions/66532071/flex-svg-behaving-strange-in-ios-safari-14-0-3

A width of 100% on the svg does the trick as per the top voted answer on the above. I'll do a bit of testing and create a pull request.

Thanks for your help by the way.

[bjarnef]

It makes sense.. there has been many flexbox issues (also known as flexbugs) in Safari during the years.

Does this work although it doesn't use inline SVG icon:
https://carbon.sage.com/?path=/story/icon--default

but it has a few more styles on wrapper:

[bjarnef]

It seems it is related to SVG inside display: inline-flex:
https://stackoverflow.com/questions/66532071/flex-svg-behaving-strange-in-ios-safari-14-0-3

https://stackoverflow.com/questions/25090516/inline-svg-breaks-in-safari-and-mobile-safari

[jonnymuir]

Pull request here for proposed fix #1024