Question

So I’m running into a weird problem and was curious if anyone else has seen anything like this.

This is what I should be seeing (this is always a view from iOS5). Not the white bars on the immediate sides of the image.

This is what is showing up on iOS4

as you can see in iOS4 the background isn’t showing up, it’s just leaving it as transparent.

This is my css code for that element

  padding: 10px 0;
  display: block;
  margin: 0 auto 0px auto;
  background: #fff;
  box-shadow: 1px -1px 1px 0 rgba(0,0,0,.08), -1px -1px 1px 0 rgba(0,0,0,.08), inset 0 -1px 1px rgba(255,255,255,.5);
  -webkit-box-shadow: 1px -1px 1px 0 rgba(0,0,0,.08), -1px -1px 1px 0 rgba(0,0,0,.08), inset 0 -1px 1px rgba(255,255,255,.5);
  -moz-box-shadow: 1px -1px 1px 0 rgba(0,0,0,.08), -1px -1px 1px 0 rgba(0,0,0,.08), inset 0 -1px 1px rgba(255,255,255,.5);
  -o-box-shadow: 1px -1px 1px 0 rgba(0,0,0,.08), -1px -1px 1px 0 rgba(0,0,0,.08), inset 0 -1px 1px rgba(255,255,255,.5);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.95, #fff), color-stop(1.05, #eaeae8));
  background: -webkit-linear-gradient(top, #fff 95%, #eaeae8 105%);
  background: -moz-linear-gradient(top, #fff 95%, #eaeae8 105%);
  background: -ms-linear-gradient(top, #fff 95%, #eaeae8 105%);
  background: -o-linear-gradient(top, #fff 95%, #eaeae8 105%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeae8',GradientType=0 );

it’s not inheriting any other background calls from parent elements or anything and works in everything on desktop and works for Android and of course iOS5. So why would it be ignoring the background attr in iOS4?

Is there some sort of developer tool I could use to pull the actual CSS up on the iPhone? not just the safari developers tool that alerts me of errors.

thanks,
brodie

Answer 1

needed to change

background: -webkit-gradient(linear, left top, left bottom, color-stop(0.95, #fff), color-stop(1.05, #eaeae8));

to

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.95, #fff), color-stop(1.05, #eaeae8));