Why does the image in my loaded page quickly appear then disappear?

Question

When my page loads, an image in the header quickly appears then magically disappears within a couple of nano-seconds. Sometimes, however the page loads correctly, meaning the image in the header actually remains visible. I cant figure out why this randomly happens.

Ideally, the page along with the image is supposed to load and remain visible.

I have a included the related helper, events, CSS and HTML snippets to aid in understanding whats going on.

Find below my template:

<template name="merchantChat">  
{{#each chatMessages}}
    <img class = "img-responsive img-rounded blur" src="{{this.photo.url}}" alt="thumbnail" >
{{/each}}
</template>

Find below my CSS:

img.blur{
   position: absolute;
   z-index: -1;
    width:100%;
    height:100px;
   margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 0px;
    clip: rect(5px,640px,50px,5px);
    zoom:190%;
    -webkit-filter: blur(1.3px);
    filter: blur(0.9px);
}

and my helper as a Router function:

Router.route('/merchantChat/:_id', {
template: 'merchantChat',
data:{ 

    chatMessages: function()
            {

            var selected = Router.current().params._id;
            return buyList.find({ _id: selected}).fetch();               
            },
    }
}); 

Any help is greatly appreciated.

Answer 1

The issue had nothing to do with the CSS as we earlier thought, but had to do with the approach I was using to access the image in the object.

It seems like the reason why the image would blink is because the

{{#each chatMessages}}
    <img class = "img-responsive img-rounded blur" src="{{this.photo.url}}" alt="thumbnail" >
{{/each}}

would iterate through the cursor, the first time displaying the image, then erasing the image in preparation to display the second image, which would never come...

To correct this issue, I looked back at how I was accessing the image in the object:

Router.route('/merchantChat/:_id', {
template: 'merchantChat',
data:{ 

       chatMessages: function()
        {
           var selected = Router.current().params._id;
           return buyList.find({ _id: selected}).fetch();               
        },
}
}); 

and changed this to:

Router.route('/merchantChat/:_id', {
template: 'merchantChat',
data:{ 

       chatMessages: function()
       {    
        var selected = Router.current().params._id;
        return buyList.find({ _id: selectedBargain }).fetch().map(function(image) { return image.photo.url(); });
        },
    }
}); 

Leaving the CSS file as it is, I changed the template from:

<template name="merchantChat">  {{#each chatMessages}}
<img class = "img-responsive img-rounded blur" src={{this.photo.url}}"alt="thumbnail" >
{{/each}}
</template>

To:

<template name="merchantChat">  
{{#if chatMessages}}
<img class = "img-responsive img-rounded blur" src="{{chatMessages}}" alt="thumbnail" >
{{/if}}
</template>

Now the image always displays on page load :-)