alev alev - 2 months ago 16
CSS Question

element unvisible until developer console opened

I've got a website where some LayerSlider elements stay invisible until


  • the window is resized

  • I disable the Bookmarks bar in Chrome (whaaat ?)

  • I switch on Chrome debugger tools



The issue also appears in Firefox and Safari on OS X (all on the newest versions).

I have no idea what that could be. To me it looks like some OS render issue.

I am looking for a workaround.

How can I trigger some kind of repaint after pageload that will unhide those elements? (same thing that happens when I open the dev console for instance)

I tried
jQuery(document.body).hide().show();
but that doesn't work.

There is bit more info to it:

The image is hidden because it is scaled to zero height and with after the initial load

<img src="http://www.example.com/wp-content/uploads/2016/09/example.png" class="ls-bg" alt="alpha_video" style="padding: 0px; border-width: 0px; width: 0px; height: 0px; margin-left: 765.5px; margin-top: 299px;">


After the resize of the window the image size of that element suddenly changes (some kind of on the fly HTML manipulation)

<img src="http://www.example.com/wp-content/uploads/2016/09/example.png" class="ls-bg" alt="alpha_video" style="padding: 0px; border-width: 0px; width: 1508px; height: 612.625px; margin-left: 0px; margin-top: -11.8125px;">


How is such a resize being done?
Why doesn't it happen after the initial load?
How can I trigger it?

Answer

How can I trigger some kind of repaint after pageload that will unhide those elements?

function afterload(callback) {
  if (document.readyState === 'complete') {
    callback();
  } else {
    jQuery(window).on('load', callback);
  }
}

afterload(function () {
  jQuery(window).trigger('resize');
});