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
Comments
Reduced example radically. |
Second trial failed also. <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). |
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 |
Just updated PR, now it handles few big imports flawlessly, resolves this issue completely. |
@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. |
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. |
Fixed by #2737 |
As usual, I've spent many long hours in debugger, but yet don't know why it happens.
Where are 2 cases:
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.
The text was updated successfully, but these errors were encountered: