Carousel Block: Visual issue with Arrow Navigation in Safari

[mikeicode]

When you use the "Arrow Navigation" style for the CoBlocks Carousel block there is a visual issue in Safari browsers.

To Reproduce

1. Add a CoBlocks Carousel to a page, choose "Arrow Navigation" style
2. View page in Safari

Expected behavior

Buttons should be round like in other browsers.

What happens instead

Full image: https://d.pr/i/ZUQKRd

It appears to be related to the previous button. If you set a specific width on the button it is resolved (in this code I target both buttons and and height so they match):

.wp-block-coblocks-gallery-carousel .flickity-button.previous,
.wp-block-coblocks-gallery-carousel .flickity-button.next {
width: 62px;
height: 62px;
}

Full image: https://d.pr/i/xg6omo

Isolating the problem:

• [x] This bug happens with no other plugins activated
• [x] This bug happens with a default WordPress theme active
• [x] This bug happens without the Gutenberg plugin active
• [x] I can reproduce this bug consistently using the steps above

Versions

WP: Version 5.3.1 Safari: 13.0.4 macOS Mojave: 10.14.6 CoBlocks: 1.18.0

[aisajib]

Adding to the above that the issue appears on Internet Explorer 11 too.

[mriyazuddin]

Reported here as well #2565080 - zen