Question

Summary

I’ve created a box with CSS and HTML. It scales horizontally and vertically, and maintains a nice gradient background and rounded corners. It only uses a single PNG background image (with multiple sprites). It works in IE7+

I’m not using CSS3, because there are subtleties in the corners and borders that make that almost impossible to reproduce with CSS3 alone. Also, it has to work in IE7 and 8.

I’ve had success making it work in all browsers that it needs to, but the problem is the iphone

---

Demo

A working example here:
http://www.trevorsimonton.com/iosbg/index.html

At the bottom of that page, I have links to output in various devices and browsers. It also works great on my HTC Evo, but I don’t have the ability to post a screenshot from that device.

---

The problem

For some reason, there seems to be some kind of padding or margin or border or something on around the background image of each div. I’ve posted screenshots of these at the above site, and a few at the bottom of this post.

• This only appears on the iphone.
• It works great on the latest releases of Chrome, Safari and Firefox.
  It also works great in IE7, IE8 and IE9
• User zoom is disabled, and the scale is locked at 1.0

---

The code

The box has complex markup to allow it to scale and show image borders in IE7+

The markup is like this:

HTML

<div class='ksrfasw'>
  <div class='content-container'>

    <!-- top and top-right corner -->
    <div class='ksrfasw-top'><div>&nbsp;</div></div> 

    <!-- right shadow, stretches down right side -->
    <div class='ksrfasw-rs'>

    <!-- left shadow, stretches down left side -->
    <div class='ksrfasw-ls'>

       <!-- inner gradient -->
       <div class="ksrfasw-tab-content">

          <!-- inner padding -->
          <div class="ksrfasw-tab-content-inner">
             CONTENT -- FINALLY!
          </div>
       </div>
    </div>
    </div>

    <!-- bottom and bottom-right corner -->
    <div class='ksrfasw-bottom'><div>&nbsp;</div></div> 

  </div>
</div>

• The background image of each key div is the same. “box.png” — that
  contains all the different “sprites” for the various parts of the
  puzzle.
• There’s also a “brace” inside the box to make min-height work in IE7.
• Yes this markup seems excessive… but it does work as expected in all
  browsers. It’s a totally scalable, rounded corner, gradient
  x-browser box.

CSS:

.ksrfasw-top,
.ksrfasw-top div,
.ksrfasw-ls,
.ksrfasw-rs,
.ksrfasw-bottom,
.ksrfasw-bottom div,
.ksrfasw-tab
{
background-image:url("box.png");
background-repeat:no-repeat;
padding:0px;
margin:0px;
border:0px;
outline:0px;
width:100%;
background-size:725px 1120px;
}
.ksrfasw-top div
{
background-position:0px -40px;
}
.ksrfasw-top
{
background-position:100% -60px;
padding-right:12px;
}
.ksrfasw-rs
{
background-position:100% -600px;
padding-right:12px;
}
.ksrfasw-ls
{
background-position:0 -100px;
}
.ksrfasw-bottom div
{
background-position:0px -20px;
}
.ksrfasw-bottom
{
background-position:100% 0px;
padding-right:12px;
}
.ksrfasw-brace
{
height:190px;
float:right;
width:1px;
}

.ksrfasw,
.ksrfasw-content-container
{
position:relative;
}
.ksrfasw-tabbed
{
padding-top:34px;
}
.ksrfasw-content-container
{
z-index:5;
}
.ksrfasw-tab
{
position:absolute;
width:154px;
display:block;
text-decoration:none;
height:61px;
top:0px;
}
.ksrfasw-tab-location
{
left:1px;
}
.ksrfasw-tab-name
{
left:151px;
}
.ksrfasw-tab-active
{
z-index:10;
background-position:-515px -700px;
}
.ksrfasw-tab-active-first .ksrfasw-tab-active
{
background-position:-515px -780px;
}
.ksrfasw-tab-active-first .ksrfasw-top div
{
background-position:5px -40px;
}
.ksrfasw-tab-inactive
{
z-index:1;
background-position:-515px -620px;
}
.ksrfasw-tab-content-inner
{
padding:20px 25px;
}










body
{
text-align:center;
}
#wrapper
{
width:95%;
max-width:700px;
min-width:300px;
margin:0 auto;
}
/**
 * Markup free clearing.
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
 */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* IE6 */
* html .clearfix {
  height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
  min-height: 1%;
}
.clearfix:after {
  font-size: 0;
}

(Note: there are other things going on in the CSS and HTML to create tabs over the box… don’t worry about that. in the example i have 1 box with tabs, and another without. both exibit the same behaviour)

---

iPhone Screenshots showing problem

Here is one:

and a zoomed version of the mysterious “padding”

---

iPad screenshot showing expectation

here’s a rendering by ipad, working as expected:

I’ve tried all i can with background-position, position, top, left, margin, padding, border and even background-size properties, and although it works great on every device tested, (including ipad!) these lines just won’t go away on iphone.

Is there something about iphone that spaces background images that I can prevent??

thanks, let me know if more examples or explanation of the linked example are necessary.

Answer 1

its the image. if you zoom in any browser, you see the same lines as on the iphone.

i think it comes from the retina-display, doubling all pixels.

you can make a proper image at double size and set it with an media query like

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .ksrfasw-top,.ksrfasw-top div,.ksrfasw-ls,.ksrfasw-rs,
  .ksrfasw-bottom,.ksrfasw-bottom,div,.ksrfasw-tab{
    background-image:url("box-doublesize.png");
}

this should fix your issue.