Schepp/CSS-Filters-Polyfill

SVG elements "take space" on page

Golmote opened this issue · 4 comments

Golmote commented

Hi,

On Firefox 18.0.2 / OSX 10.8.2 (haven't tested anywhere else), the SVG elements added to the DOM take space, as if they had dimensions.
You may consider adding some style on them (width and height to 0 / absolute positionning ?) so that they don't impact the page appearance.

The issue can be seen explicitely when you load this page example ( http://www.der-schepp.de/css-filters-polyfill/examples/animating-natively-vs-jquery/natively.html ). You may see the vertical scrollbar moving as the SVG elements are added to the DOM.

Schepp commented

Hi!

thank you for your feedback. Did you try the newest version? In my last commit I should have addressed this problem. Maybe not good enough?

Thanks!

Golmote commented

It's better but still not optimal. If I remove all margins and add a <p> element to the body, there's still a visible gap. (https://f.cloud.github.com/assets/565460/185161/f3656246-7cfc-11e2-9028-b74f2d6dd5a9.png) Did you try absolute positionning ?

Schepp commented

Hi!

I just pushed a new version, that should fix it. I inlined most SVGs into the filter declaration like so:
http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

An exception are SVG filters referencing "SourceImage" - they only work appended to the DOM. For them I followed your suggestion and added position:absolute.

So give it a shot!

Golmote commented

Yes ! It looks perfect now ! :)