Safari showing border of transparent PNG

Question

A website I work on has a partly transparent png image overlying parts of the website. The image is resized to 100% of the browser window width. In all other browsers the transparent parts behave normal – but safari shows a thin outline whee the image should be transparent.

I hope the screenshot makes the problem clear:

Now I'm wondering if this is this a bug – or a feature? And of course I would like to get rid of that zigzag line – so any suggestions and pointers are welcome. Thank you!

EDIT:

1. Yes, I checked if the image has a grey line – but it does not.
2. Also this problem anly appeared after I updated Safari to 11.0.2.
3. And when modifying the img's width in dev tools first to the actual width (7000px) and then back to 100% the grey line disappears.
4. Here is a link to the website where the problem appears.

Answer 1

I just faced the same issue and stumbled upon this question.

For me, the image showed a thin, medium-dark, shadowy border at the edge between the non-transparent and the transparent part of the image. The issue was only visible in Safari.

For me, the solution was to simple add transform: translateZ(0px) to the image. This changes the rendering of the image in a way that prevents the border.

---

However, you might want to restrict this fix to Safari since it causes the image to be rendered pixelated in Chrome.