1

I'm experiencing a simple, yet unexpected rendering issues when browsing my webpage using Mobile Safari and iOS.

Basically, my page has tabs, which are made of three divs and a "a href" inside the center div of the tab. The divs on the sides contain a background while on the center the link has an image. For some reason, the background on the a href displays horizontal yellow lines on Mobile Safari:

https://i.stack.imgur.com/jlKHf.jpg

While on desktop browsers it works fine:

[couldn't add another link, it should be whiteish]

.TabPanelLinks_true {
    background: url(".../seltab-center.jpg") repeat-x scroll 0 0 transparent;
}

.TabPanelElement a {
    color: #5C5C5C;
    cursor: pointer;
    display: block;
    font-family: arial,helvetica,clean,sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 22px;
    margin: 0;
    padding: 0 5px;
    text-align: center;
    text-decoration: none;
}

I've tried with a different image, no success. I tried adding the background to the center div, no success. Any idea of what's happening?

Thanks in advance.

jorgemoya
  • 55
  • 1
  • 2
  • 7

2 Answers2

0

I think this is due to background layers not getting masked correctly, or at least that was my problem. It seems to happen when there are multiple backgrounds overlaid over each other.

Single/sub pixel misalignment of divs on ipad and iphone safari

Following the advice of someone in that thread, I added this 

border: 1px solid transparent;

to the div that was getting the weird lines, and that fixed it.

Community
  • 1
  • 1
Beck Johnson
  • 1,201
  • 1
  • 11
  • 11
0

I wish there was a way to experiment with this, seeing as I don't have an iPad--but possibly specify a border : none; ?

You could try a single div, with the 'ends' of the tab as absolutely positioned images to the left : 0 and right : 0 ...an alternative method that shouldn't look any different, but may fix the issue? If you need the transparent background on the tab graphics, you could absolutely position the images outside of the div, and adjust the margin/padding accordingly.

jlmakes
  • 2,945
  • 1
  • 26
  • 38