getContainer() delivers wrong element if element has size defined in percent about cq-prolyfill HOT 8 CLOSED

If I am right, it should return the element itself, because the width has a fixed definition

If the element has a percentage width, the dimension is not fixed in all cases. In the following example, the percentage width is not fixed:

<div style="width: 1000px;">
	<div style="float: left;">
		<div style="width: 50%;">
			<div>My Element</div>
		</div>
	</div>
</div>

But with a small change (removing the float from the parent) it becomes a fixed width and thus a valid container:

<div style="width: 1000px;">
	<div style="float: none;">
		<div style="width: 50%;">
			<div>My Element</div>
		</div>
	</div>
</div>

So in the first case the outermost <div> should get returned by getContainer() and in the second case the <div> with the percentage width should get returned.

Does this explanation help? Or do you have an example code where it doesn’t work as intended?

from cq-prolyfill.

Hallo,
thank you for your comment. It made it more clear. Nevertheless, that is not the problem.
I was digging a little bit deeper and recognized, that the problem comes from the stylesheet parsing.
In my css, I include other css files. In this case, the buildStyleCacheFromRules() function fails, because the "if (rules[i].type === 1)" is false (rules[i].type is 3) and the "else if (rules[i].cssRules)" is undefined.
In this case (rules[i].type === 3), the css rules are in the object rules[i].styleSheet.cssRules.
So if we add the following case to the if, it should work:
else if (rules[i].type === 3 && rules[i].styleSheet.cssRules) { buildStyleCacheFromRules(rules[i].styleSheet.cssRules); }
I've just tested it and it works.
And I created a codepen to showcase the problem: https://codepen.io/anon/pen/wyWbWm

What do you think?

from cq-prolyfill.

This sounds like the issue #49.
This was fixed in 579d039 in the development branch and will be fixed with the next release.

from cq-prolyfill.

Yes, it's the same issue. I've fixed it a little bit different, because imported stylesheets can contain imported stylesheets again. I've just created a pull request, that - at least I think so - handles all cases and is very simple.
Thank you, best regards, Pascal

from cq-prolyfill.

Did you test the changes from 579d039 ?
Nested imports should work there too.

from cq-prolyfill.

Ahh, sorry. I missed something. You are talking about the buildStyleCacheFromRules() function, not about parseRules().

You are right, that needs to be fixed too. I close this issue in favor of your pull request #51.

from cq-prolyfill.

Hello,
I just recognized a problem with my fix with Firefox. Firefox has a bug that restricts js access to css imported with @import ("SecurityError: The operation is insecure error").
I just updated my fix and will start a new pull request.

from cq-prolyfill.

Great. But you can push more commits to your existing Fix-@import-stylesheet-parsing branch. This way you don’t have to create a new pull request.

from cq-prolyfill.