0

We have a background on our Magento web site that expands as needed due to the amount of content. It seems to work fine on PCs and (hopefully Macs). But on any iOS device, the white background is not shown.

I have included two screenshots - one of how it looks in a regular PC browser and one showing how it looks on an iPhone.

Here is our site: http://tinyurl.com/arfpf7g

Here is a link directly to the image that is not showing up on iOS devices: http://tinyurl.com/bcovmvg

Thanks!!

Jonathan
  • 23
  • 1
  • 6
  • This is how it should look (with the white background behind the text and photos. It is also above the polka dot background. See this link for the image (I can't upload images yet since I am a new member to this site): http://tinyurl.com/b6a7k3q This is how it looks on an iOS device: http://tinyurl.com/aphho7f Notice how the white background is missing. Also, what is causing that black line on the iPhone site to appear? – Jonathan Jan 09 '13 at 03:07

3 Answers3

1

You have a class called .box_top. Inside you have a float: left; I don't know why, but try and remove that and replace it with a overflow: hidden. At least in FireFox and IE9 they were. 

.box_top {
    background: url("../images/box_top.png") no-repeat scroll center top transparent;
    display: block;
    overflow: hidden;
    width: 1002px;
}

Also, remove the margin: 0 0 -5px. This is causing a small grey shadow at the bottom of each box on the out side of the border.

ZombieCode
  • 1,646
  • 2
  • 24
  • 46
  • Thanks. I removed the margin which removed that grey shadow...I never noticed that. Also, I tried replacing float:left with overflow:hidden, but that did not make the box_top image show up on my iPhone. It also cut off the right tip of the arrow that goes off the white content section when I used overflow:hidden. – Jonathan Jan 09 '13 at 15:38
  • By the way - I changed it back to float:left for now... – Jonathan Jan 09 '13 at 22:26
  • I checked it in safari on my own computer (PC) and it showed okay so it must be the mobile Items. I would create a basic page and start adding elements of your home page to it. Testing each step as you go to see what CSS class is causing the background to disappear. – ZombieCode Jan 10 '13 at 06:35
  • Does anyone have any other ideas? Thanks! – Jonathan Jan 12 '13 at 01:09
0

This is a new bug from iOS 6.0 where PNG images that are not saved with "interlacing" OFF, do not show up, or sometimes are completely black. Try saving your PNG file with "interlacing" set to "OFF"

Justin Jb Bryant
  • 49
  • 5
0

There's no mystery as to why that image won't display in iOS, the image dimensions are 978x10000 pixels (yes 10,000). Even though it's only 167 kB on disk, when expanded into memory, it's huge.

From the Safari Web Content Guide:

The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.

That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image.

In addition to not showing up on iOS Safari, you're sure consuming a lot of memory on every other browser as well. Surely you could separate the "top" and "side" portions of the image and use background-repeat to tile the sides. No reason for the "side" portion of that thing to be more than 50px in height.

It's not the interlacing issue, the image is encoded without interlacing

steveax
  • 17,527
  • 6
  • 44
  • 59