Famo.us - weird 1px border orund surface

Question

I am learning to work in Famo.us framework, but I have a repeating problem. Around my surfaces there is weird 1px gray border, like one when there is no image src on image element. Do someone know how to solve that.

EDIT

This only happens when I set image as background of surface.

  function _createBody() {
        this.bodySurface = new ImageSurface({
             properties: {
                size:[undefined,undefined],
                //backgroundImage: 'url(images/background.png)',
                //backgroundRepeat:'no-repeat',
               // backgroundSize: 'cover',
                border:'0',
                 backgroundColor: 'red'
               
            },
            content:'images/background.png'
        });

        this.layout.content.add(this.bodySurface);
    }

When I set image as content of Surface, border is gone.

Answer 1

The reason is exactly along the lines as you had observed. When you try to set the background image of an ImageSurface, you are creating an img tag with no source. That is why you get the border, regardless to the fact if the image is showing up (from the background property).

When you want to use backgroundImage, use it only on a Surface, not an ImageSurface. The content property of a Surface takes the inner HTML of the div element Surface is creating, but the content property of ImageSurface just takes the img tags src attribute.

So these are your two options..

Surface with backgroundImage..

var surface = new Surface({
  size:[200,200],
  properties:{
    backgroundImage:'url(content/images/famous_symbol_transparent.png)'
  }
});

ImageSurface with content..

var surface = new ImageSurface({
  size:[200,200],
  content: "content/images/famous_symbol_transparent.png"
});

Hope this helps!