Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

reflow and flickering on pageload #48

Open
perludum opened this issue Dec 14, 2015 · 2 comments
Open

reflow and flickering on pageload #48

perludum opened this issue Dec 14, 2015 · 2 comments

Comments

@perludum
Copy link

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
Copy link

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
Copy link

d3caf commented Jun 5, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants