Props table does not show border on Safari

[robbertkl]

For example, go to the Avatar component on the Storybook Design System using Safari. The props table should show a nice shadow border with rounded corners, but it's missing in Safari.

The underlying reason is that it's a box-shadow and border-radius on the <tbody> element. It seems Safari does not support this. Giving the tbody a display: block does make the shadow appear, but breaks the layout.

Safari screenshot

Chrome screenshot

[shilman]

@domyen can you take a look?

[domyen]

Got it! We'll need to provide separate styles for Safari (that aren't as handsome) due to limitations with table styling in Webkit.

[shilman]

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-rc.27 containing PR #11805 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.