1

I have this div with no border. On the iPhone/iPad browsers it appears with a black border around. The code:

.progress {
position: absolute;
left: 0px;
z-index: 9999;
background: #ffffff url(img/progress.gif) center 95px no-repeat;
height: 100%;
}

I already tried with:

border: 1px solid white;

But to no avail. Also transparent brings nothing.

Screenshot: http://liebdich.biz/img/Foto.PNG

Edit: Actually I am not sure what is happening. Since this div appears on other cases without border. Go to http://liebdich.biz/blanc to see it live. It is the Ajax "loading" animation div. Whenever you click on a link you can see it. However if you go to http://liebdich.biz/blanc/profile and click on an image you see the same div, but with a border...? Can it be, that this is in connection with the jQuery fadeOut of the images?

Thank you!!

loveNoHate
  • 1,549
  • 13
  • 21
  • Did you pull this up in iOS simulator and inspect the dom? There is another property, Outline, that could be in use. Are you using a CSS reset? – stacey.mosier Nov 07 '13 at 01:44
  • You have to bring more information. Please provide the html and other css in use...I made some test in nothing pops as a black border. – Juan Nov 07 '13 at 02:27
  • @stacey.mosier No, I did not use the iOS simulator, should I give a try? I tried with `outline: 0 !important;`, to no avail. I use `normalize.css`. – loveNoHate Nov 07 '13 at 02:29
  • @Juan Go to http://liebdich.biz/blanc/profile and click on an image. Thanks!! – loveNoHate Nov 07 '13 at 02:30
  • 1
    @loveNoHate I have the same issue, but on links instead of divs. Only on iPhone and iPad. So, 6 years later: is there a known solution meanwhile? – JonSnow Oct 11 '19 at 14:32
  • @JonSnow Same issue on links. I use this : https://stackoverflow.com/a/55579041/3139120 – fabienbranchel Jun 03 '20 at 08:42

1 Answers1

0

This was happening to me and it had to do with the meta tag allowing zoom

Apparently iOS Safari has a problem with resizing things and creates that artifact

Applying a meta tag to disable zoom solved my problem (user-scalable = no)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Antonio Brandao
  • 218
  • 2
  • 10
  • This fixed the issue for me where borders were appearing on a slider container, only in landscape though on both iPhone and iPad. – TDH Jan 08 '14 at 02:26
  • 1
    With this tag you are disallowing users to zoom, which is a bad accessibility practice. For example for people with low vision who rely on screen magnifiers. – neiya Sep 17 '19 at 12:25
  • Yeah this is a big UX no-no. Not allowing users to zoom is not the way. – Dana Scheider Apr 08 '23 at 11:04