Doesn't work for hidden images

[RaptorCZ]

Please check this fiddle: https://jsfiddle.net/RaptorCZ/4wmzuskb/

There are 2 rows in grid. 2nd row is hidden by default and you have to click to show/hide this row.
Seems that svg filter is not applied correctly to this row. There is so many NaN instead of numbers.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 NaN NaN" width="NaN" height="NaN" version="1.1">
    <image 
            filter="url(&quot;#gray&quot;)" 
            preserveAspectRatio="none meet" 
            x="0" 
            y="0" 
            width="NaN" 
            height="NaN" 
            xmlns:xlink="http://www.w3.org/1999/xlink" 
            xlink:href="http://work.karlhorky.com/gray/img/color.jpg" />
</svg>

[karlhorky]

Yep, this is a known issue with this project. Figuring out the size of the images would be difficult, since the complexity of the image styling is pretty much unlimited (images could be sized, containers could cause the image to become a smaller size, etc.).

This could be added as a configuration option for the plugin (you pass the width and height), but that is complex and brittle and just one more thing for the developer to maintain and test on every change.

My recommended solution has been to either:

• apply the grayscale effect when the elements are generated and visible

or

• make the images visible for long enough for the plugin to create the SVG (you could do this off-canvas so that there is no FOUC)

[karlhorky]

I've documented this in 007303a