Layout bug on Safari with cols gap not respected.

Issues
1

Hi guys, experiencing a layout bug in both desktop and mobile safari, cols gap is not respected
How to fix this simplest layout on safari?

image.png
image.png656×923 38.2 KB

image.png
image.png1180×921 39.8 KB

1.png
1.png1170×440 10.6 KB

2 
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  margin-left: calc(0px - 8px);
  width: calc(100% + 8px);

Could it be that * + * margin-left be better for spacing in stacks than negative margin?

3

@yang Hi! Could you please help? :slightly_smiling_face:

4

@chungwu Hi, could you please help? :slightly_smiling_face:

5

Hi, in order to help, would you mind sharing some more details about the issue? I couldn’t really understand what was the issue from your description

Where are you seeing this? Can you share both the live published page URL and a link to the page inside of a plasmic project?

6

Cols gap property is working incorrectly in safari, both desktop and iOS
In plasmic it’s 8px with container’s width set to hug content, but in safari cols gap is all over the place
Shared project id and page link in DM
Works correctly in firefox/chrome though :thinking_face:

7

Just wanted to give you an update here that we’ve been able to repro the issue, thank you for reporting it

8

In the meantime, a workaround is to set the width of the wrapping link elements to 28px