2

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.
|improve this question
  • Can you share the image itself? I suspect the grey outline is part of the image, stackoverflow.com/questions/19549498/… – grg♦ Jan 2 '18 at 16:43
  • Please provide the URL to the actual image, not some screenshot. – user3439894 Jan 2 '18 at 16:48
  • Thank you for your suggestion. The image has however no grey line. Also this problem anly appeary after I updated Safari to 11.0.2. And when modifying the width in dev tools first to the actual width (7000px) and then back to 100% the grey line disappears. (updated the question accordingly) – tillinberlin Jan 2 '18 at 16:58
  • I'm on Safari 11.0.1 and I'm not seeing any line. Definitely a bug though. – l008com Mar 21 '18 at 10:37
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.

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.

|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .