I am designing a website containing some large and very detailed graphics. It is aimed at photographers and users of graphics software. It is therefore uncompromisingly prioritised for desktop and landscape tablets. I am designing in 1200 and having Sparkle scale to 900. As I am a Sparkle debutante scaling for phones will have to come later when I am a bit more experienced.
So here is my problem. Something odd is happening on scaling.
The image attached is part of my home page.
In the top image you can see it laid out in Sparkle. It consists of a number of elements laid out on a black filled box filling the page.
In the second image I have changed the box to white so you can see how the main image is composed. It has a black background, the edges of which are intended to disappear into the the black box behind it.
In the third image it is previewed full size in Safari. It looks exactly as I intended and want.
In the fourth image the Safari window been reduced so as to use the 900 scaling and an odd white artefact has appeared on the right edge of the image.
This happens in Safari and Chrome on desktop and laptop and also on iPad so it would appear to arise within Sparkle itself. If I change the size of the image in my layout the effect appears and disappears seemingly rather randomly.
One obvious solution might be to create the image with a transparent background but in this particular case the soft edged reflections in the bottom make that a little bit tricky to do really well.
So, please, does anyone have any idea what is happening here and why this is occurring?
Fingers crossed this link will work. 
