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

Big CSS causes styling issues when elements combined together #2381

Closed
nazar-pc opened this issue Aug 27, 2015 · 7 comments
Closed

Big CSS causes styling issues when elements combined together #2381

nazar-pc opened this issue Aug 27, 2015 · 7 comments
Assignees
Labels

Comments

@nazar-pc
Copy link
Contributor

As usual, I've spent many long hours in debugger, but yet don't know why it happens.
Where are 2 cases:

  • few elements imported from separate files, styling works properly
  • put everything in the same order into one file - styling becomes partially broken

It was not possible to put into jsfiddle/jsbin, so I've reduced my real case and put it into repository so that you can play with it: https://github.com/nazar-pc/Polymer-style-bug

Live demo:

The problem disappears when you remove big chunk of CSS that comes from Font Awesome, it seems to cause an issue.

Problem appears in Firefox (stable & nightly) and doesn't in Chromium 44.

Please, find time to investigate this.

@sorvell sorvell self-assigned this Aug 27, 2015
@sorvell sorvell added the p1 label Aug 27, 2015
@nazar-pc
Copy link
Contributor Author

nazar-pc commented Nov 5, 2015

Reduced example radically.
Also got problem reproduced with 2 very similar concatenated HTML files, where one is working and another is not.
Still didn't figure out how to fix 😞

@nazar-pc
Copy link
Contributor Author

nazar-pc commented Nov 5, 2015

Second trial failed also.
Test case boils down to including single file.
File with such contents works properly:

<script>
    Polymer({
        'is'      : 'cs-input-text',
        'extends' : 'input'
    });
</script>
<style is="custom-style">
    html /deep/ input[is=cs-input-text] {
        border : 4px solid red;
        @apply (--cs-blue);
    }
</style>
<style is="custom-style">
    :root {
        --cs-blue: {
            border : 4px solid blue;
        };
    }
</style>

And with such doesn't:

<style is="custom-style">
    html /deep/ input[is=cs-input-text] {
        border : 4px solid red;
        @apply (--cs-blue);
    }
</style>
<script>
    Polymer({
        'is'      : 'cs-input-text',
        'extends' : 'input'
    });
</script>
<style is="custom-style">
    :root {
        --cs-blue: {
            border : 4px solid blue;
        };
    }
</style>

Usage:

<input type="text" is="cs-input-text">
<script src="webcomponents.min.js"></script>
<script>Polymer = {dom:'shadow'};</script>
<script>
    addEventListener('WebComponentsReady', function  () {
        Polymer.updateStyles();
    });
</script>
<script src="polymer.js"></script>
<link href="concatenated.html" rel="import">

I have feeling that problem is with WebComponents.js (happens both with Shadow DOM polyfill and Shady DOM, while works fine with native Shadow DOM).

@nazar-pc
Copy link
Contributor Author

nazar-pc commented Nov 6, 2015

This one was really difficult. Only third trial succeed and took around 25 hours of step-by-step debugging in total, but finally it works: #2692
Review it, please.

@nazar-pc
Copy link
Contributor Author

nazar-pc commented Nov 7, 2015

Just updated PR, now it handles few big imports flawlessly, resolves this issue completely.

@sorvell
Copy link
Contributor

sorvell commented Nov 12, 2015

@nazar-pc Would you mind verifying if this branch fixes the issue? https://github.com/Polymer/polymer/tree/fix-2692.

Your PR was extremely helpful, and the timing here is very tricky. I think the branch above is hopefully what we need. Thanks for your help.

@nazar-pc
Copy link
Contributor Author

Yes, checked with my full-scale examples - everything works as expected.

The only concern about your fix is that it is quite invasive, while basically solves problems of HTML Imports implementation. Which means that it would be difficult to remove once all browsers will have proper HTML Imports implementation. In my it is hacked in single place and hence much easier to drop afterwards.
Otherwise looks good.

@nazar-pc
Copy link
Contributor Author

Fixed by #2737

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

No branches or pull requests

2 participants