DEfusion.org.uk

You sir, are a saint for figuring this out. I sincerely appreciate you blogging this, and will link to your article.

A great post. Thank you very much for writing this article, it’s just saved me a load of work.

Thanks!

Thank you for posting this. I have been pulling my hair for the last two days over this.

same issues on ipad. thank you soo much for posting this!

Thanks a Lot for sharing! Very helpfull.

I thought I was the only one having this problem! I had discovered this bug on my own, and had come to the same conclusion about file size. I took my jpgs that were being “safari” downsized, and converted them to gifs. This of course, resulted in a smaller sized file, and caused the bug to disappear. The solution I implemented was to just break the one large jpg into two smaller ones (my large jpg files were being used as background images, and needed to be the size I had set). In the CSS, I just referenced them as such. Works nicely, but slows things down due to a second HTTP request when the page is loaded. Thx for the nice break down on file size here. I still say this is a bug, I don’t care what Apple says. :-)

Thanks a lot for figuring this out dude, this will be a great help to me – I’m trying to modify a tumblr theme for a charity’s website and the background image I’ve used is just too large.

Thanks to your handy guide I’ll reduce it to a known ‘safe’ size!

Cheers from Canada!

Am I glad to finally run into your website… almost cooked my brains out last two days trying to keep my new site’s background (1920×1080) from scaling on Mobile Safari. Thanks for posting your extensive image size testing results, makes the problem a lot more clear! Now I can finally give my head some rest… it’s all Steve’s fault! ;)

Thank you, thank you… saved me hours of work, as I just ran into the same thing.

You helped me a lot!
Thanks!

Thanks for this post. It helped! Saved me lots of testing time to figure it out myself.

Wow, I thought I was going crazy! Gratitudes to you for solving this. That’s about the craziest bug ever.

Agh!! This is so good! I was playing around with text-resize CSS and nothing was working. Then I’ve done as you’ve said and changed the background image size which has worked!
Thanks so much for this resource.

nice post ! thanks

It looks like saving over 2 megapixel images as progressive jpgs overcomes this limitation.

This was driving me a bit crazy – been trying to get a commerce site to look “right” on iphone and THIS was the problem!

Any workaround yet ? (grin)

Thanks a bunch. IM happy i now know why my pages are getting distorted…. but i didnt wanna change the size. i hope they fix this problem soon…. but at least no i can get it fixed in the short term.
bravo!

So, let me get this straight…you build a site for the nice new shiny 2560px wide screens that Apple sell as standard with a full-screen background image and this will break on other Apple products like the iPhone and iPad? Are Apple really that stupid?

I didn’t say thanks for your post by the way. Meant to, it saved me a lot of wasted experimentation. Here’s something I discovered. I split the background into two. Took it out of the body background CSS and placed the two images in the foreground behind the mainContainer using width=50% and positioned absolutely left and right respectively. The problem with this was that I got a hairline fracture between the two in Chrome, Safari (windows) and Opera. I nudged the right image in by 1px. This solved the issue in Chrome and Safari but not Opera. It also didn’t have an adverse effect in FF and IE (7 and 9) either. So with Opera being the only casualty, this seems the best results under a damage limitation regime. Would be interested in a better suggestion if anyone knows of one.
Thanks again for the post.

You are amazing. I was having issues with my lightweight, but large PNGs not showing up in the background of my site. Now, as long as they’re less than 3MP it’s fine.

Thanks!

Very, very nice hint. THX a lot for this. Keep good work!

Thanks so much! I’ve suffered this seemingly random issue for awhile and could never figure out what was wrong. Really appreciate the article!!!

I changed Widht 1732 x Height 1155 pixels (= 2000460 pixels) in 1732×1154 pixels (= 1998728). And in the code of my Blogspot-blog I changed ‘no-repeat’ in ‘repeat’. Now it’s OK, also on my iPhone !!!!

http://bondtehond.blogspot.com/

(HTML/Javascript-Widget)

body {background-image: URL(http://img638.imageshack.us/img638/8844/nuopsite2.jpg); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }

changed in:

body {background-image: URL(http://img638.imageshack.us/img638/8844/nuopsite2.jpg); background-position: center; background-repeat: repeat; background-attachment: fixed; }

THANK YOU VERY MUCH !

Save your image as ‘Progressive’ in Adobe Photoshop, instead of ‘Optimized’.

You can still use the full size and it will be shown correctly on your iPhone, or iPad.

I figured this out when I accidently saved the image as ‘progressive’. Major breakthrough, hehe!

+1 for the saving of Progressive if you cannot shrink your image enough.

A great bit of information! This has just saved me hours! Many thanks.

Thanks for this article! This has been happening to all my websites as I make the backgrounds 2000 pixels wide. Really disappointed about this ‘bug’.

Thanks for this, found you after asking searching questions on Google, has sorted out a very frustrating issue for me on a couple of sites. As someone reliant on easy build web software I’d never have programmed it out!

I salute you for saving me tons of work!. I had same problem on iphones. Also took the oppertunity to optimize pics. So now all is running smooth and faster :)

thanks for the great article

Thanks a ton! My client was driving me crazy with this issue. I got it fixed now, thanks to all of you!

Thanks! This just saved my holidays. :)

Thank you so much for taking the time to write the article. It’s much appreciated!

Sure enough. The image that I’m working with is 2.6MP. Thanks, this saves me a lot of confusion.

Wow – This was driving me crazy. Thank you much! The progressive save also worked wonders!

OMG!!! THANK YOU SO MUCH!!!! YOU JUST SAVED HOURS OF WORK FOR ME!!! (i was gonna create a whole new theme just for iphone) YOU ARE THE BEST!!!!!!! THANK YOU THANK YOU THANK YOU

If you create these big images by code, piping the result through “jpegtran -copy none -progressive -optimize” should do the trick

thx2ttz for that hint

Thanks man! Wow, for two days in a row i’ve been trying to figure this out! I’ve tried about everything! What a stupid bug! I mean, people have wifi and high speed internet these days right? Finally we get to play with higher resolution and estethic well designed websites. They need to fix it! Thanks again man!

WAY TO GO! Awesome article. My images where quite a bit bigger, I resized using progressive mode in PS and saved me a huge amount of time. Thanks @Roel for the suggestion

Thank you very much. You have saved my time.

This was TREMENDOUSLY helpful to me! Thank you for the time you put into preparing this blog!!