search

louisremi / background-size-polyfill

Adds support for background-size "cover" and "contain" to IE8
http://louisremi.github.com/background-size-polyfill/
MIT License
1.26k stars 359 forks source link

Won't work on hidden elements #31

Closed kiezpro closed 10 years ago

kiezpro commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

That's an easy fix, thanks!

jefferyto commented 10 years ago

Thanks!

thomasduenser commented 10 years ago

@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 commented 10 years ago

@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'))