Tag <picture> does not work on mobile phones and IE11

Asked

Viewed 390 times

4

I’m working with the tag <picture> to use its responsive function and inserting several sizes of the same image into a single object according to the screen resolution by the "media" parameter of the tag <source>. On Chrome and Mozilla Firefox the results were perfect but on mobile phones and IE11 did not work, they are only using the image in the tag <img> follows an example of the error:

a#capa-individual{
width: 85%;
position: relative;
display: block;
margin-top: 3%;
margin-bottom: 3%;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
border: 30px solid rgba(255,0,0,.3);
}
.foto1{
width: 100%;
vertical-align: middle;
text-align: center;
border-radius: 5px;
border: 0px solid rgba(0,0,0,.7);
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="erro.css">
</head>
<body>
		<a id="capa-individual" href="individual.html">
			<picture>
    			<source class="foto1" srcset="http://thumbs.dreamstime.com/x/lying-male-dalmatian-18553200.jpg" media="(max-width: 480px)">
    			<source class="foto1" srcset="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg" media="(min-width:481px)">
    			<img class="foto1" src="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg.jpg" alt="">
			</picture>
		</a>
	
</body>
</html>

html css

  • What didn’t work exactly? What error did you get, didn’t recognize the CSS? Explain it better.

  • It doesn’t really show errors friends, everything works, but not in the right way, it’s very strange because I’m here testing on various devices, and in no cell phone the "media" function of the <picture> tag is working. The photo that appears on cell phones below 480px is simply the large photo that is in the <img> tag. But on the other hand in Chrome and Mozilla is perfectly functional, when I put the browser to resolution below 480px, soon appears the small photo. Already in IE when I put the browse below 480px, continues the big photo, does not recognize the "media". I do not know what is happening

  • If it’s a problem with mediaquery then you should put all the css, put something we can play. If you just put snippets and say that the problem is somewhere else it becomes difficult to understand. When I say ERROR I don’t mean ERROR message but to explain how it should work and what is happening instead of expected. Put a code that we can reproduce the problem.

  • @Guilherme Nascimento Certo, then follows the CSS in its entirety and the Html of the picture tag, it got a little big but the error may be somewhere in the middle of it all, I looked and looked and did not find. I edited them in question. Thanks for the help

  • When I told you to put an example that we can reproduce, it was for you to take only the necessary parts and try to make the same effect of failure, it became a giant CSS that only you understand, I recommend even if with all attention read this link: http://answall.com/help/mcve makes it easier for you to help us help you out ;)

  • http://prntscr.com/a5cb71 http://prntscr.com/a5cbaw

  • @Guilherme, thanks for the guidelines, I have read the post and sorry, now I understand how to do, follow the code with the error, I ran on my server and gave the same mistake ever , It is happening the same as on my site. Chrome and mozila the code works perfectly and IE and mobile phones do not work

  • @GOLX Just two more things, which cell phones occur the problem? On my IE11 I noticed the failure, as soon as I have some time I will try to understand what happened (I am on working hours) ;) - Ps.: It was great the example you added and it was possible to understand the failure.

  • @RZ-8121 so this is flawed, was for IE11 to appear the first photo, the others he only changed the name, I know it was not so clear, but once I have a time I will edit, his problem is the tag <source> which does not work then shows the tag <img> which is a fallback, if you want you can try to answer, I know the reason for this, the problem is that I still don’t have an alternative solution ;)

  • @Guilherme, thank you, so it doesn’t work on the 2 phones I tested, Samsung Galaxy Duos and ZTE, the two with screen less than 480px.

Show 5 more comments

2 answers

3

The element picture is not supported in IE11, you can query which browsers support it in: http://caniuse.com/#feat=picture.

What you can do for IE11 to support it is to use a polyfill, which are Java libraries that simulate the behavior of new features in older browsers:

A polyfill for the picture could be the : https://scottjehl.github.io/picturefill/

Add this code to your page for picture polyfill to work:

<head>
  <script>
    // Picture element HTML5 shiv
    document.createElement( "picture" );
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.js" async></script>
</head>

Example in Codepen: http://codepen.io/anon/pen/OMKqqz

3


The element <picture> is not supported in Safari for iOS and IE11. It is possible to verify this in http://caniuse.com/#feat=picture.

An alternative is the use of attributes srcset and sizes, where it is possible to specify different images for different resolutions. According to Can I use..., the resource is already widely supported (http://caniuse.com/#feat=srcset).

Example:

<img src="small.png" 
     srcset="large.png 1280w, medium.png 640w, small.png 320w" 
     sizes="(max-width: 500px) 250px, 500px" 
     alt="">

In the srcset, you specify the address of the image and right after its width in pixels (1280w). In the attribute sizes, the browser is indicated the breakpoints using a media querie and the size the image will be displayed. The size (max-width: 500px) 250px, 500px tells the browser "if the viewport is less than 500px, the image will be 250px wide. If larger, the image will be displayed 500px wide. The browser will choose which of those images best fits this situation.

  • vi o Caniuse e realmente não é o IE 11 não suporta a tag, e pelo que vi browser do android também não. thanks. You have some hint as to how I can present replace this function?

  • Great answer and very good alternative. @GOLX decided to mark the answer as correct.

  • yes the answer from Fonso killed the why. And what alternative can I have for this problem? would be to do an img with display:One with the smaller photo. And screens smaller than 480px (mobile phones), put a display:block for the small photo and a display:name for the large photo? This will be the best alternative?

  • @GOLX in the answer itself already present a solution to the problem. Something more rudimentary would be exactly what you said: deal with display:none and display:block. But this would make the browser load both images, which would slow the page loading.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.