Aviary Editor Loads blank image until screen is resized

Question

So I have an instance of aviary editor on my site, it pulls images from filepicker and then resubmits them. The problem I am having is that when I load an image, it initially has a thumbnail I have loaded appear, then the screen goes blank...until I resize the screen and the image appears normally.

Here is what it looks like, notice the image dimensions in the bottom. They go from the already loaded thumbnail to a blank image, with the correct dimensions displayed until I slightly change the windows size.

While it is loading, dimensions of the thumbnail in bottom After it has loaded, correct dimensions in bottom After slightly changing window dimensions, the image appears

Here is my initialization code:

function initEditor( apiKey ){
var tools = ['enhance', 'orientation', 'focus', 'resize', 'crop', 'effects'];
var featherEditor = new Aviary.Feather({
    apiKey: apiKey,
    apiVersion: 3,
    displayImageSize: true,
    tools: tools,
    maxSize: 800,
    theme: 'minimum',
    onSave: function(image, newUrl){
        //onSave function, sends to external filePicker source 
    },
    onError: function(errorObj){
        console.log(errorObj);
    },
    onLoad: function(){
        //load only if there is an img
        if (typeof img !== 'undefined'){
            openEditor(img, src, featherEditor);
        }
    }
});
return featherEditor;
}

Opening Code:

image = "img-id_image_relations-0-image"

src = "https://www.filepicker.io/api/file/mX42P6fLRS6YDP58moIH"

function openEditor(image, src, editor){
editor.launch({
    image: image,
    url: src
});
//return false;
}

Things I have tried:

• Loading the image into a div before opening,

• Simplifying the feather initialization to the bare minimum,

• Test on external facing server and localhost,

What stinks is when I test it on jsFiddle it works perfectly. http://jsfiddle.net/TD4Ud/

Answer 1

It's very dirty, but I found a temporary solution of firing the window resize event when the image loads. I would love there to be a better answer, but this will work in the interim.

Add this as the onReady event in the initialization:

onReady: function(){
        //this is an abomination but it works
        window.dispatchEvent(new Event('resize'));
    }