Incorrect image border rendering on Safari (with workaround)

Issues
1

What are you trying to do? (please be as specific as possible and include relevant screenshots, code snippets)

Apply a border to an image that has width = Stretch and is within a horizontal or vertical stack and have it render correctly on Safari. See minimal test case project and associated live demo.

What are the reproduction steps?

  1. Create a horizontal or vertical stack.
  2. Add an image as child of the stack.
  3. Set the width property of the image to “Stretch”.
  4. Set the border properties of the image so that it has an easily visible border (e.g. solid, 1em wide).
  5. Publish and view the result with Safari (desktop or mobile).
  6. Note that when viewed with Safari, the image will incorrectly have gaps inside the border above and below the image. The size of the gaps will be approximately the same as the width of the border.

The issue appears to be related to the fact that Plasmic wraps each image in its own flexbox with CSS class __wab_img-wrapper. The associated styles for that class include flex-direction: column. The following global CSS works around the issue by changing it to be flex-direction: row:

:where(.__wab_img-wrapper) {
  flex-direction: row;
}

Relevant links:

2

Hi Dean,

Welcome to the Plasmic forum! I appreciate the detailed issue report. The current flex-direction: row is there to counteract a different Safari bug, so we’ll need to investigate how to safely fix this.

My current suggestion to work around this is to add borders in a wrapping container.