Forum Discussion
Storyline 360 picture border showing incorrect
Hi, I've encountered an issue where a picture border is showing incorrect when not in the working view. The border shows as expected when i am working on the course but when I go to preview or publish the slide, two sides of the border show more thin than they should be. There's no other assets on the slide other than what you see here- the title and two pictures, each with their own respective picture borders. I already tried removing then re-adding the border and deleting then re-inserting the picture. Any help is appreciated- thank you!
working view:
preview view:
3 Replies
I've experienced similar issues before, and the closest I've come to diagnosing a cause is that it (to me) seems to be related to images that've been cropped. I think the image is technically displayed as/inside an SVG and then the border is applied around the outside of what the SVG's bounding box should be, but because the image is cropped, especially I think if it's a fractional amount, the cropped image still finds a way at runtime to show on top of the border.
Perhaps the issue will disappear if the images are cropped in MS Paint and/or reimported? I'm also personally a fan of putting a colored rectangle behind avatars such that the rectangle shows a few pixels equally on all four sides of the avatar. Grouping them together in the timeline after that ensures they'll always stay together.
SVG borders in Storyline can be tricky because SVG doesn’t have a true CSS-style border. What looks like a “border” is actually a <path> with a stroke drawn around the image.
Since strokes are centered on the path, part of the border can fall outside the visible area and get clipped, especially when scaling or transforms are applied. That’s why edges can appear uneven or cut off.
To keep all borders visually consistent in thickness, a simple workaround is to change the drawing order with JavaScript so the path is rendered on top of the image.
PREVIEW
I don't think it is really a Storyline bug. Storyline just outputs an SVG where the “border” is a stroked <path>, and then the browser handles the rendering. But Storyline just makes it more noticeable because it positions and scales elements dynamically and it places the stroke behind the image by default.
SLIDE VIEWkellyr: Here are some potential non-JavaScript workarounds:
Use image-editing software to add a border to the actual image. Then insert the image into Storyline.
or
Create a black shape. Add the picture directly into its Normal state. Adjust the picture's alignment and size as needed.
- I suggest this for adding the pic: Start with the pic in Storyline. In the Accessibility window, hide the pic so it won't be in the Focus Order. Copy the pic. Go into Edit States mode for the shape. Paste the pic, and adjust its alignment and size as desired.
or
Create a shape with a border, and use the picture as the "fill."
