Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Ie9 support #8

Closed
wants to merge 6 commits into from

2 participants

@chrishilditch

One possible way to support IE9. I'm not sure if I like it, but thought I'd share it to see what you all make of it. I'm still searching for a better solution.

Chris.

@scottjehl
Owner

Thanks. Clever approach! Hmm.. I think I agree with you though - not sure I like it as an addition to the markup pattern. I'll keep this in the tracker for now, but let's try and come up with some alternative ideas. :)

@chrishilditch

Absolutely.

Also this doesn't fix the Android issue, which is essentially the same problem.

@scottjehl
Owner
@scottjehl scottjehl closed this pull request from a commit
scottjehl This refactors the proposed markup (slightly) and picturefill JS to b…
…roaden browser support. The included update to README.md explains the changes I'm proposing to the markup pattern (there no changes to elements themselves) to support browsers that formerly did not work, like iOS4, IE browsers versions 6-10, Android browsers 1.x and up. As a result, there aren't any known "unsupported" browsers, in that every browser tested so far at least receives a fallback image - for example, IE6-8 will only see picture source elements that do not use media queries, since it doesn't support them natively (media types are ok though). Fixes #5 and Fixes #8.
404c39d
@scottjehl scottjehl closed this in 404c39d
@chrishilditch chrishilditch deleted the chrishilditch:ie9_support branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 32 additions and 6 deletions.
  1. +4 −2 index.html
  2. +28 −4 picturefill.js
View
6 index.html
@@ -14,7 +14,8 @@
<h1>Picturefill: A &lt;picture&gt; element polyfill</h1>
<p>For more info: <a href="http://github.com/scottjehl/picturefill">see project home.</a></p>
-
+
+ <!--[if IE 9]><video style="display:none"><![endif]-->
<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<!-- smallest size first - no @media qualifier -->
<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_m.jpg">
@@ -29,7 +30,8 @@
<!-- Fallback content for non-JS or non-media-query-supporting browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_m.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
</picture>
-
+ <!--[if IE 9]></video><![endif]-->
+
<script src="external/matchmedia.js"></script>
<script src="picturefill.js"></script>
</body>
View
32 picturefill.js
@@ -25,10 +25,34 @@
// feature. **Note**: there is a polyfill available for `matchMedia`:
// <https://github.com/paulirish/matchMedia.js/>
if ( hasNativePicture || !matchMedia || !matchMedia('only all') ) return;
-
+
w.picturefill = function(){
+
+ // In IE 9 The picture element must be placed inside a video element,
+ // to prevent the stripping of the source elements. This removes the
+ // picture element from inside the video element, and places it before it.
+ if ( document.getElementsByTagName( "picture" )[0].parentElement.tagName == "VIDEO" ) {
+
+ var vs = document.getElementsByTagName( "video" );
+
+ // Loop the video elements
+ for( var i = 0, il = vs.length; i < il; i++ ){
+
+ var vps = vs[ i ].getElementsByTagName( "picture" );
+
+ // If there is a picture element, move it
+ if (vps.length!=0) {
+ document.getElementsByTagName('body')[0].insertBefore(
+ vps[0].cloneNode(true),
+ vs[ i ]
+ );
+ vs[i].parentElement.removeChild( vs[i] );
+ }
+ }
+ }
+
var ps = document.getElementsByTagName( "picture" );
-
+
// Loop the pictures
for( var i = 0, il = ps.length; i < il; i++ ){
var sources = ps[ i ].getElementsByTagName( "source" ),
@@ -37,7 +61,7 @@
// See if which sources match
for( var j = 0, jl = sources.length; j < jl; j++ ){
var media = sources[ j ].getAttribute( "media" );
- if( !media || matchMedia( media ).matches ){
+ if( !media || matchMedia( media ).matches ) {
matches.push( sources[ j ] );
}
}
@@ -54,7 +78,7 @@
}
}
};
-
+
// Run on resize
if( w.addEventListener ){
w.addEventListener( "resize", picturefill, false );
Something went wrong with that request. Please try again.