Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

polymer-project.org: has significant FOUC on IE10 #148

Closed
sorvell opened this issue Sep 13, 2013 · 8 comments
Closed

polymer-project.org: has significant FOUC on IE10 #148

sorvell opened this issue Sep 13, 2013 · 8 comments
Assignees

Comments

@sorvell
Copy link

sorvell commented Sep 13, 2013

No description provided.

@ghost ghost assigned ebidel Sep 13, 2013
@ebidel
Copy link
Contributor

ebidel commented Sep 13, 2013

Is this the body opacity transition? Thought about overriding it, but the top toolbar and left menu
make the site layout janky until everything is setup.

@sorvell
Copy link
Author

sorvell commented Sep 14, 2013

It looks like the fixed position elements are not respecting the body's
opacity. So when the body is opacity: 0, the left and top are still
visible.

This seems like an IE bug and I suggest we work around it by giving the
left and top the same opacity toggling that we do for body. We should
provide a better way to do this in polymer (
Polymer/polymer#276)

On Fri, Sep 13, 2013 at 4:56 PM, Eric Bidelman notifications@github.comwrote:

Is this the body opacity transition? Thought about overriding it, but the
top toolbar and left menu
make the site layout janky until everything is setup.


Reply to this email directly or view it on GitHubhttps://github.com//issues/148#issuecomment-24432124
.

@ebidel
Copy link
Contributor

ebidel commented Sep 27, 2013

@sorvell can you check this again? I've made the site ajax. There's likely still the opacity IE bug on the elements,
but at least you should only see that once :)

@sorvell
Copy link
Author

sorvell commented Sep 27, 2013

IE10 is still reloading the whole page when the menu links are clicked. It
looks like the docsMenu.ajaxify is false in IE. I think that's because
you're setting it in app.js before WebComponentsReady. You'll need to do
any initialization work on the docsMenu when that event fires.

After fixing docs-menu.ajaxify while debugging, I noticed that IE is taking
awhile to load the sub-pages; the Elements:Polymer page in particular takes
~10 seconds to load. I'm not sure why that would be but I can help try to
track it down. Would be it possible to commit a running version of the site
to polymer somewhere for easier debugging? Thanks.

On Thu, Sep 26, 2013 at 5:27 PM, Eric Bidelman notifications@github.comwrote:

@sorvell https://github.com/sorvell can you check this again? I've made
the site ajax. There's likely still the opacity IE bug on the elements,
but at least you should only see that once :)


Reply to this email directly or view it on GitHubhttps://github.com//issues/148#issuecomment-25214603
.

@ebidel
Copy link
Contributor

ebidel commented Sep 27, 2013

Good call on WebComponentsReady. Fixed.

Setting up the docs requires grunt, jekyll, the app engine sdk:
https://github.com/Polymer/docs/blob/master/README.md

The URL routing won't work correctly without running the site with the App
Engine dev_server.

If anything, I'd expect
http://www.polymer-project.org/getting-started.htmlto take the
longest. It's got the most inline .
Elements:Polymer
is just bootstrap tabs. Do you see the same delay if you refresh the page
directly?

On Fri, Sep 27, 2013 at 10:10 AM, Steve Orvell notifications@github.comwrote:

IE10 is still reloading the whole page when the menu links are clicked. It
looks like the docsMenu.ajaxify is false in IE. I think that's because
you're setting it in app.js before WebComponentsReady. You'll need to do
any initialization work on the docsMenu when that event fires.

After fixing docs-menu.ajaxify while debugging, I noticed that IE is
taking
awhile to load the sub-pages; the Elements:Polymer page in particular
takes
~10 seconds to load. I'm not sure why that would be but I can help try to
track it down. Would be it possible to commit a running version of the
site
to polymer somewhere for easier debugging? Thanks.

On Thu, Sep 26, 2013 at 5:27 PM, Eric Bidelman notifications@github.comwrote:

@sorvell https://github.com/sorvell can you check this again? I've
made
the site ajax. There's likely still the opacity IE bug on the elements,
but at least you should only see that once :)


Reply to this email directly or view it on GitHub<
https://github.com/Polymer/docs/issues/148#issuecomment-25214603>
.


Reply to this email directly or view it on GitHubhttps://github.com//issues/148#issuecomment-25261001
.

@sorvell
Copy link
Author

sorvell commented Sep 30, 2013

NOTE: as a result of Polymer/polymer@24b3b3b, elements can now be initially hidden by adding the 'polymer-unveiled' class to them. This should help address IE FUOC issues.

@ebidel
Copy link
Contributor

ebidel commented Sep 30, 2013

Thanks @sorvell. I might wait for this to hit a release before testing it with the site, but I think it'll work great.
By default, it keeps the FOUC prevention on body but also allows for finer control over the embedded elements in our ajax pages.

@ebidel
Copy link
Contributor

ebidel commented Oct 4, 2013

I've added this in 1c1e312

@ebidel ebidel closed this as completed Oct 4, 2013
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants