: How to remove the blur/leak in some edges and color discrepancies for this image? I have this image exported for the web from Photoshop CC 2015, but it has a couple of issues that I want

Posted in: #AdobePhotoshop #ColorProfile

I have this image exported for the web from Photoshop CC 2015, but it has a couple of issues that I want to solve.

The problem is in the vertical strip in color fuchsia with a pattern of hearts in color pink.

First, when I open the image in Preview on the screen of a MacBook Air Mid 2012 the pattern with pink hearts won't show up. The strip is in a solid color, fuchsia, I guess.

If I drag the Preview window to an eternal monitor, HP w22, or place the window one half on the laptop display and the other half of the monitor, the pattern of hearts suddenly appears but only after I stop dragging the window. If I keep moving the window on the external monitor the pattern of herts won't show up either.

Second, if I open the image on my Android mobile device (Acer Iconia B1-770), there appear to be a blur or color leak between the same fuchsia strip and the curvy strip in color green to the left. It looks as if the pixels closer to the green strip were in color dark violet.

How can I remove those discrepancies so that the image look pretty much the same in all three displays?

These are the current settings I have for the color profile, and the image mode is RGB Color and 8 Bit/Channel.

Update

This is a screen-capture showing how the same image looks on Photoshop CC, Chrome, Firefox and Safari (from left to right respectively). Only Chrome seems to be rendering the image consistently on both displays (the external monitor is on the upper half).