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.
Related
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).
I have faced next strange behavior in Firefox when use ico file as src in img tag.
When It opens in Firefox (latest version), it has 16x16 format despite of the fact that ico original format is 128x128.
In other browser (Chrome, IE) everything works great.
Just open elephant-128x128.ico in Chrome and Firefox and you will see the difference.
<img height='128' src="http://icons.iconseeker.com/ico/cloth-dolls-icons/elephant-128x128.ico">
https://jsfiddle.net/qwx2sxzg/1/
or
http://icons.iconseeker.com/ico/cloth-dolls-icons/elephant-128x128.ico
Does anybody has idea how to fix this?
Your best bet is to convert ico files to another format, since it is not compatible with all browsers.
Image Format Support For Web Browsers
There is no other workaround for it.
Use input file tag for capture image from ipad camera.
<input type="file" accept="image/*;capture=camera">
On Safari - back screen, on Chrome - work.
What problem with safari?
Hello you should know that the camera API is new and not available for all browsers. Here you can see, if it's available for the specific browsers. You also will see that Safari doesn't support it. Only a few supports it like : GC, FF, Opera, GC for Android and Android Browser.
Supporting Camera
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 this image:
<img src="images/myimages.png" alt="">
It works only using Safari. It's not shown in Chrome, firefox or Safari 'Mobile' (iPad, iPhone).
Any reason?
Your file seems to be a PSD (Adobe Photoshop) file that has been renamed to .png.
Store it as a proper PNG.