Responsive images & IE9

[yvanavermaet]

Hi all

I've raised an issue about "Responsive images & IE9" on the general Thymeleaf forum and they told me to raise this issue here as it's related to this module: http://forum.thymeleaf.org/Responsive-images-amp-IE9-td4028863.html

The problem in short (more details in the link above):

• To support responsive images (via the "picture"-element), you need a video-tag in a conditional IE9 comment surrounding the actual "source"-elements inside the "picture"-element. See example here: http://dumptext.com/b3ymVsKt
• Unfortunately that throws an error in the module because the "video"-tag isn't closed correctly: Caused by: org.thymeleaf.exceptions.TemplateInputException: Unbalanced close tag "video"

I don't want to use Thymeleaf's "Legacy HTML5", if that's even a solution.

Kind regards,
Yannick

[danielfernandez]

Thymeleaf 2.1 uses XML parsers underneath, which don't allow you to have non-closed tags. This will change in 3.0. In the meantime, you could refactor your code as:

<picture>
    <!--[if IE 9]>
        <video style="display: none;">
            <source media="(min-width: 630px)" srcset="image-352x370.jpg 1x, image-704x740.jpg 2x" />
        </video>
    <![endif]-->
    <!--[if !(IE 9)]>
            <source media="(min-width: 630px)" srcset="image-352x370.jpg 1x, image-704x740.jpg 2x" />
    <![endif]-->
    <img src="image-mobile.jpg" alt="" srcset="[email protected] 2x" />
</picture>

[yvanavermaet]

Thanks for your reply, Daniel. We'll give your solution a go and see if the picturefill (js polyfill for browsers that don't support the picture element) still works.