Won't work on hidden elements

[kiezpro]

Thanks for the great polyfill which saved me a lot of headaches! Currently, I'm building an app which shows and hides a lot of different parts of the page. I've noticed that if I show (using jquery('...').show()) parts of the page which have been hidden before and which contain elements which use the background-size-polyfill, then the background images don't show. I haven't found a good way to work around this yet.

[jefferyto]

If you "touch" an element that use the polyfill, i.e. assign to any property of the DOM object (it doesn't matter if the property value remains unchanged), the polyfill should update the background image as necessary.

For example, if the elements that use the polyfill all <div class="bg">, then this should cause an update:

$('div.bg').prop('class', 'bg');

There isn't a nice way to monitor CSS changes on parent elements, so a workaround like this is the best we can do at the moment.

Hope that helps :-)

[kiezpro]

That's an easy fix, thanks!

[jefferyto]

Thanks!

[thomasduenser]

@jefferyto Thanks for the fast answer (in Issue #32), my div looks like this: div class="item cover-image" style="background-image: url('..')" where "cover-image" includes the htc file.

This fix helps a little bit, but also removes the "item" class from the div. Do i need to change the HTML structure or is there another fix?

[jefferyto]

@thomasduenser Assuming you're using jQuery, you can do something like this (where div is the element you want to update):

div.prop('class', div.prop('class'))