New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

html5 semantic tags + inline-svg = weird bug in old ie #66

Closed
wheresrhys opened this Issue Nov 27, 2013 · 12 comments

Comments

Projects
None yet
5 participants
@wheresrhys
Member

wheresrhys commented Nov 27, 2013

The following

<header><svg><path /></svg></header>

results in the header tag not closing in ie7 & 8 (even with the inclusion of html5shiv), whereas the following does not

<header><svg><path></path></svg></header>

So should self-closing tags within svgs (and, by extension, self-closing tags outside of the core html specs) be disallowed in favour of closing them explicitly? On the surface it seems like an edge case, but as we're taking a mobile first approach inline-svgs could become quite common and would tend to break layouts in ie without this stipulation

@triblondon

This comment has been minimized.

Show comment
Hide comment
@triblondon

triblondon Dec 18, 2013

Contributor

Probably. Do we need an SVG coding standard? @richard-still-ft, do we have one anywhere in the FT at the moment?

Contributor

triblondon commented Dec 18, 2013

Probably. Do we need an SVG coding standard? @richard-still-ft, do we have one anywhere in the FT at the moment?

@triblondon

This comment has been minimized.

Show comment
Hide comment
@triblondon
Contributor

triblondon commented Jan 10, 2014

@kavanagh

This comment has been minimized.

Show comment
Hide comment
@kavanagh

kavanagh Jan 10, 2014

Member

No one make's SVGs by hand. The tools that create SVGs use self closing tags. How annoying.

Member

kavanagh commented Jan 10, 2014

No one make's SVGs by hand. The tools that create SVGs use self closing tags. How annoying.

@triblondon

This comment has been minimized.

Show comment
Hide comment
@triblondon

triblondon Jan 10, 2014

Contributor

What do we mean by 'old' here?

Contributor

triblondon commented Jan 10, 2014

What do we mean by 'old' here?

@kavanagh

This comment has been minimized.

Show comment
Hide comment
@kavanagh
Member

kavanagh commented Jan 10, 2014

@wheresrhys

This comment has been minimized.

Show comment
Hide comment
@wheresrhys

wheresrhys Jan 10, 2014

Member

Thinking about this, it may be a shortcoming of html5shiv. If html5shiv also created an element for each svg tag my guess is the bug would be fixed. I'll try it out sometime

Member

wheresrhys commented Jan 10, 2014

Thinking about this, it may be a shortcoming of html5shiv. If html5shiv also created an element for each svg tag my guess is the bug would be fixed. I'll try it out sometime

@triblondon

This comment has been minimized.

Show comment
Hide comment
@triblondon

triblondon Jan 10, 2014

Contributor

OK. This is an issue in IE8, since SVG would be part of supporting visual style and would need to work even in CTM-failing browsers. Worth digging a bit further.

Contributor

triblondon commented Jan 10, 2014

OK. This is an issue in IE8, since SVG would be part of supporting visual style and would need to work even in CTM-failing browsers. Worth digging a bit further.

wheresrhys added a commit to Financial-Times/o-header that referenced this issue Jan 27, 2014

@wheresrhys

This comment has been minimized.

Show comment
Hide comment
@wheresrhys

wheresrhys Jan 28, 2014

Member

I've now tested out #66 (comment) and my hunch was right; the bug can be fixed by adding svg path to html5shiv's list of elements.

Currently html5shiv (which Modernizr consumes) allows redefining the list of elements, but doesn't allow just adding to it, so I created a pull request to achieve this aFarkas/html5shiv#142.

Whether we want to use this approach though is debatable as it's quite an unwieldy dependency to express: 'This module requires html5shiv or modernizr but with a, b, c additional tags added to the list of elements that are shived' - yuk!

Member

wheresrhys commented Jan 28, 2014

I've now tested out #66 (comment) and my hunch was right; the bug can be fixed by adding svg path to html5shiv's list of elements.

Currently html5shiv (which Modernizr consumes) allows redefining the list of elements, but doesn't allow just adding to it, so I created a pull request to achieve this aFarkas/html5shiv#142.

Whether we want to use this approach though is debatable as it's quite an unwieldy dependency to express: 'This module requires html5shiv or modernizr but with a, b, c additional tags added to the list of elements that are shived' - yuk!

@triblondon

This comment has been minimized.

Show comment
Hide comment
@triblondon

triblondon Feb 10, 2014

Contributor

Can't we just make a build script where needed to expand self-closing paths into opening and closing tags?

Contributor

triblondon commented Feb 10, 2014

Can't we just make a build script where needed to expand self-closing paths into opening and closing tags?

@triblondon

This comment has been minimized.

Show comment
Hide comment
@triblondon

triblondon Feb 18, 2014

Contributor

@wheresrhys nudge.

Contributor

triblondon commented Feb 18, 2014

@wheresrhys nudge.

@wheresrhys

This comment has been minimized.

Show comment
Hide comment
@wheresrhys

wheresrhys Feb 18, 2014

Member

A build script where? In build service/products, in which case its an extra overhead in adopting origami components (and an unpredictable one - update to a module version that starts using inline svg and suddenly your product's build needs a new step to process svgs).

Maybe the spec should say 'svgs must either not be inline or not use self-closing tags' I only used inline for ft-header as the ft logo is probably the thing that needs to load quickest anywhere, but for most other use cases an <img> or background image might do (although we then bring in the perennial problem of paths for img#src).

Longer term, have you seen the new bounty feature in github? Offering a bounty to have html5shiv updated to a better api (aFarkas/html5shiv#142), and pushing for modernizr to adopt something like 'if modernizr is testing for inlinesvg then also shiv all the svg tags' could enable us to stop worrying about this entirely.

Member

wheresrhys commented Feb 18, 2014

A build script where? In build service/products, in which case its an extra overhead in adopting origami components (and an unpredictable one - update to a module version that starts using inline svg and suddenly your product's build needs a new step to process svgs).

Maybe the spec should say 'svgs must either not be inline or not use self-closing tags' I only used inline for ft-header as the ft logo is probably the thing that needs to load quickest anywhere, but for most other use cases an <img> or background image might do (although we then bring in the perennial problem of paths for img#src).

Longer term, have you seen the new bounty feature in github? Offering a bounty to have html5shiv updated to a better api (aFarkas/html5shiv#142), and pushing for modernizr to adopt something like 'if modernizr is testing for inlinesvg then also shiv all the svg tags' could enable us to stop worrying about this entirely.

@ArmorDarks

This comment has been minimized.

Show comment
Hide comment
@ArmorDarks

ArmorDarks Aug 18, 2017

@triblondon Just run into same situation.

As turned out, you can use self-closing tags in inlined SVG and keep IE8 still working as expected. For this, surprisingly, xmlns attribute has to be removed. As a side note, for non-XML html-pages it is completely ok and according to the specs.

Note, that it has to be removed only for inlined SVG, and not ones, that declared through <img> tag.

ArmorDarks commented Aug 18, 2017

@triblondon Just run into same situation.

As turned out, you can use self-closing tags in inlined SVG and keep IE8 still working as expected. For this, surprisingly, xmlns attribute has to be removed. As a side note, for non-XML html-pages it is completely ok and according to the specs.

Note, that it has to be removed only for inlined SVG, and not ones, that declared through <img> tag.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment