I'm looking at this page for reference
The code I'm trying to get to work looks like this
<figure>
<picture>
<source srcset="images/specto1#1x.png 1x, images/specto1#2x.png 2x">
<source srcset="images/specto1.png">
<img src="images/specto1-old.png" alt"Spectrogram of hiss event at the South Pole">
</picture>
<figcaption>Spectrogram of hiss event at the South Pole</figcaption>
</figure>
The demo for loading different images using scrset does not seem to work with safari 9 however it works fine in chrome. I was under the impression that safari and iOS has now implemented scrset attribute since safari 9 and iOS safari 8.
At the moment safari 9 is loading specto1-old.png while chrome is loading specter1#1.png
Can someone explain why the demo works in chrome but not safari?
EDIT: Idk How i butchered the tittle so badly. "Is safari not correctly displaying images using the srcset and pictures tag?"
srcset on img should work in Safari but picture doesn't work yet (only in beta at the moment).
Related
I have two images in my html page that are of webp file type.
<img src="./assets/beros-capak.webp" class="article-image" />
<img src="./assets/mapa.webp" class="article-image" />
But, as you can see in the image above, the first webp image is not loaded and the other is loading fine.
I have tested it on chrome, firefox and safari on iphone, and they are all not loading the first image, while both on android and mac pc load both images with no errors.
Why is that?
It depends on the version of iOS.
All browsers on iOS use WebKit so they are all subject to the same compatibility issues as Safari.
According to https://caniuse.com/webp, WebP is supported on iOS 14 and up.
I am using HTML5 audio along with angular2. It works for desktop very smoothly. But when it comes to media device it seems not working.
I have tested on iOS chrome and safari.
Any help would be highly appreciated?
I'm trying to use picture tag in Firefox. caniuse.com says that picture supported in Firefox 33 (beta) and I can enable support in Firefox 32 (current) manually.
I opened an example from html5rocks and I can see that it doesn't work. Also I tried on my own http://vm-0.krasulya.kd.io/. There are requests only to basic image (src attribute) in webinspector network panel.
Both examples work in Chrome Canary.
According to http://www.whatwg.org/specs/web-apps/current-work/multipage/edits.html#the-picture-element HTML is correct.
Does FF support picture at all?
UPD
Here is my markup:
<picture>
<source
src="1.jpg"
type="image/jpeg"
media="(min-width: 300px)"
srcset="1.jpg, 2.jpg 2x"/>
<img
src="1.jpg"
srcset="1.jpg, 2.jpg 2x">
</picture>
Suddenly scrset attribute is still disabled by default in Firefox (even Nightly, see bug #870021). To enable it, go to about:config and set dom.image.srcset.enabled value to true.
Here’s the page to test it: http://pepelsbey.net/pres/picture/demos/retina.html
There’s also layout.css.devPixelsPerPx flag which could be set to 2.0 to test retina on non-retina device.
As I was upgrading a site to use bootstrap css I noticed a page that has an iframe that it uses. Another developer claims it works only in IE, but I cannot get it to work in IE, FF or Chrome. FF and Chrome display nothing, while IE 11 blows up trying to load the pdf.
The code that is literally in the view source of what the browsers are trying to read just doesn't look quite right to me. Thoughts?
<iframe id="ContentPlaceHolder1_pdfFrame" width="720" height="590" name="pdfFrame" src="File:\\chc\shared\IntakeTest\Storage\WF_Test_20130702161454_2.pdf"></iframe>
I have pretty simple code that contain two boxes one beside the other here: http://fiddle.jshell.net/tjV3U/.
The first box contain some text, and the other one contain a video (code: <video width="..." src="..." controls=""></video>)
in google chrome the code works well, also in firefox and internet explorer, but unfortunately it doesn't work in safari and I can't figure out the solution for this problem.
Just try to open the fiddle link in google chrome and in safari.
Safari supports only the MP4 format for video players. not WebM and Ogg.