reflow and flickering on pageload

[perludum]

The scotch panels produce a lot of reflow and flickering on the site when loading on (slower) mobile devices (tested on iphone 4s). This does not happen when taking off the panel from the site.

I guess it's because the CSS is loaded via javascript. In my case the javascript got deferred, but i can reproduce this same kind of reflow on the panels.scotch.io site too.

I think the reflow could be prevented by writing the css into a stylesheet rather than loading it via javascript.

[joerichsen]

I had the same problem with flickering and reflows.

Based on the comment above, I removed the lines

            // Scotch Panel Wrapper CSS
            $('.scotch-panel-wrapper').css({
                'position': 'relative',
                'overflow': 'hidden',
                'width': '100%'
            });
            // Scotch Panel Canvas CSS
            $('.scotch-panel-canvas').css({
                'position': 'relative',
                'height': '100%',
                'width': '100%'
            });

and put them into a stylesheet instead:

.scotch-panel-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.scotch-panel-canvas {
  position: relative;
  height: 100%;
  width: 100%;
}

and this solved the problems on my web page :-)

[d3caf]

It would be nice if there were an init event that I could listen for. That way I can have the panel hidden until it's actually initialized.