Re: [media-queries] Issue with media-queries and embedded SVG

On Fri, Jul 6, 2012 at 1:07 PM, Jeremie Patonnier
<jeremie.patonnier@gmail.com> wrote:
> I added an @media print rule inside an SVG image and embedded this SVG image
> inside an HTML document through the <img> tag.
>
> I was really surprise to see my image not following the @media print rule
> when I tried to print my HTML document. I tried to do this with Firfox,
> Chrome, Safari and Opera (I do not have IE), they all reacte the same : my
> image was printed colored.
>
> I tried to do the same with my SVG image embedded through the <object> tag.
> This time it worked pretty well and my image was printed following the
> @media print rule \o/
>
> My point is that, in a user/author point of view, I do not see any reason to
> have a different behavior between those case. It really should behave the
> same. But some Mozilla folks told me that it was an "unspecified behavior"
> [1] so here I'm to discuss this :)

This appears to be a bug.  I don't believe it's undefined.  Sharing
the image data from an SVG across multiple consumers is an efficiency
tweak, but it gives the wrong behavior here.


> After this discussion, I ran some more tests, using media-queries to see
> what would happen [2]... to say the least I was very surprised.
>
> I was expected to see all the media-queries defined inside the SVG documents
> to react to the viewport state of the parent document... what a mistake. All
> the media-queries depending on the window state (width, aspect-ratio,
> orientation) were reacting to some weird viewport equal to the size of the
> SVG image! But at the same time, all media-queries depending on the device
> characteristics (device-width, color, monochrome, device-aspect-ratio) were
> reacting properly. As a sugar point, depending on how the SVG image is
> embedded, Chrome does not always react as other browser.
>
> In an author point of view, all of this is really hard to understand. I
> really think that CSS media-queries inside an embedded SVG image should
> react to the characteristic of both the parent document device AND window.

This behavior is expected.  The SVG is an embedded document and thus
gets its own viewport.  I'm less sure about what's supposed to happen
with inline SVG.  I'd probably prefer it to use the main document's
information.

I'm unsurprised that browsers act inconsistently here, though.

It would perhaps be interesting to have this behavior change if the
SVG was referenced with an <iframe seamless>.  I'll file a bug on HTML
to have that happen in general.

~TJ

Received on Monday, 9 July 2012 23:30:37 UTC