Safari showing border of transparent PNG

graphicsimage editingsafariwebsites

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:

enter image description here

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.

Best Answer

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.

Comparison of the rendered image with the thin border in safari and the original image with transparency visualized

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.

Related Question