wordpress images not showing on iphone

WordPress images not showing on iphone

I want to create a section with a background covering it in a mobile web page, so I was using the following CSS code:

The background is showing correctly on Android (Chrome, Firefox . ), but it is not showing at all on iPhone or iPad (Safari, Chrome iOS . ). I have tried to set these properties using jQuery when the DOM is ready, but no luck. I read that the size might be a problem, but the image is about 700kB (1124x749px) so it should accomplish the Safari Web Content Guide rules. Which is the problem?

There’s a problem with your CSS rule:

Your using the shorthand notation in which the background-size -property comes after the background-position -property and it must be separated by a / .

What you’re trying to do is to set the position, but it will fail as auto is not a valid value for it.

To get it to work in shorthand notation it has to look like this:

Also note that there’s a value called cover , which may be suitable and more flexible here:

The support for background-size in the shorthand notation is also not very broad, as it’s supported in Firefox 18+, Chrome 21+, IE9+ and Opera. It is not supported in Safari at all. Regarding this, I would suggest to always use:

Here are a few examples and a demo, to demonstrate that behavior. You’ll see that Firefox for example shows every image except the fist one. Safari on the other hand shows only the last.

CSS

Demo

Further reading

See background-size. This property must be specified after background-position, separated with the ‘/’ character.

Image slider not working on iPad/iPhone

This topic contains 11 replies, has 2 voices, and was last updated by Sakin 5 years, 6 months ago.

Hi, the slider doesn’t seem to be working on iDevices. Works fine on desktop PCs/Macs, though. Any ideas? Thanks!

@mrjonnyjones: This is strange. Can you tell me the customization you have done. Maybe there is conflict with your customization or with the plugin you have installed.

So first try disabling plugins and check in.

@Sakin As far I as I know I’ve made no customisation to the slider at all. I tried tweaking the ‘ ’ arrows but I think I put them back to how they were, that’s it I think.

@Sakin OK, I had a breakthrough. I was using the ‘Video.js – HTML5 Video Player for WordPress’ plugin for a homepage video. I deactivated it and the slider is now working on my iPhone. Can you think why there might be this conflict?

@mrjonnyjones: I don’t know about it. Why do you want o use video.js in your this theme. We already have responsive video support.

I wasn’t aware of that. I thought plugins were the only way to do this.

@Sakin What would you suggest I do to get the slider working with video on the same page? I don’t know how to get video working through just using the Catch Everest Pro theme – you mentioned video support? I’ve tried another video plugin but the image slider still doesn’t work on iPhone and iPad.

Thanks for your continued help and support! ��

@mrjonnyjones: You can add any video from video site such as Youtube, Vimeo through embed code in your WordPress site. It’s not good to host your video directly on your site as it consumes log of bandwidth and also it will load slower then video sharing sites.

If you want to host in your site in anyway then can you check this plugin http://wordpress.org/plugins/jw-player-plugin-for-wordpress/

@Sakin Yes I did some tests – I embedded a YouTube video to see what would happen and the Image Slider started working fine on all iDevices. There is definitely some kind of conflict between the slider and plugins such as the JW Player you mentioned – that was the one I was using to start with.

I’m going to use YouTube and just embed the video.

@mrjonnyjones: Yes adding video from YouTube and Vimeo is great. As it reduces your hosting bandwidth and process video fast. As well as it help you to get more visitors from those sites.

I will check this with JW Player and ask our team to work on it.

@Sakin I’ve hosted videos locally for this specific website for a long time – but it only gets a few visits per month so, bandwidth wise, it doesn’t use much.

But speed and compatibility wise YouTube/Vimeo is the right direction now I think.

Huge thanks for your continued help and support ��

Question: Q: IPad not showing all images on websites

Posted on Jun 19, 2010 9:47 PM

Helpful answers

Jun 20, 2010 4:08 AM

There’s more to the conversation

  1. first
  2. Page 1 of 1 Page 1/1
  3. last

Loading page content

Page content loaded

Jun 20, 2010 4:08 AM

Jun 20, 2010 4:21 AM

Safari is unable to load any more images, works fine on the desktop, but not on the iPad.

Jun 20, 2010 4:34 AM

Ian. I would like look into this a little more as to why those images don’t load. I should have asked for the URL and left the othe part of my statement out.

That web page is about 14MB. That’s really not big at all.

Message was edited by: David M Brewer

Jun 20, 2010 10:12 AM

Jun 20, 2010 10:01 AM

Ian, I took all 104 some odd photos from the link you provided and brought them into a HTML I made. The HTML didn’t display all the photos.

I brought all the photos in Photoshop and compress them down to the smallest file size that Photoshop would allow, I kept the same dimensions. I open the HTML and all the photo displayed.

Is this something that Apple isn’t aware of?

Jun 20, 2010 12:40 PM

Here is a good example. The images look so good on the iPad. I wish I could see them all!

Jun 21, 2010 10:20 PM

Download Opera mini from the app store if you want to see all of those images.

Message was edited by: David M Brewer

Jun 22, 2010 1:21 AM

  1. first
  2. Page 1 of 1 Page 1/1
  3. last

Question: Q: IPad not showing all images on websites More Less

Leave a Reply

Your email address will not be published. Required fields are marked *