CODEWITHSUNDEEP
iphonehtmlcss
tmsimont
tmsimont

Reputation: 2711

CSS/HTML iphone puts some additional space around edges of background image position. how do i remove it?

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.

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>

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: shows offset created on iphone between elements

and a zoomed version of the mysterious "padding" another shot of the mysterious padding, with a zoomed detail

iPad screenshot showing expectation

here's a rendering by ipad, working as expected: enter image description here

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.

Upvotes: 1

Views: 1551

Answers (1)

Bastian Rang
Bastian Rang

Reputation: 2187

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.

Upvotes: 1

Related Questions