SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    transparent background darker on an ipad

    Hello

    I have a transparent background image overlaying on top of other elements on a site I'm developing at the moment. I've checked it on my screens and resolutions and it's significantly darker on my ipad.

    background-image:url(../images/trans.png);
    background-repeat:repeat;
    background-color:transparent;

    the image is a one pixel image of #F2EEED and was set with an opacity of 85% before it was turned into a png.

    Is there anything obvious that I should do for ipad? I've never encountered this problem before. I compressed the png via illustrator biut can't see how this would make any difference.

    In case you were wondering I was avoiding using opacity:0.85; and filter:alpha (opacity=85); as I need to overlay more elements on top at a full opacity without having to deal with overwriting the cascading.

    I've checked the output on my ipad using firebug lite and it's outputting the same code

    any help would be greatly appreciated

    regards

    rebekah

  2. #2
    SitePoint Member
    Join Date
    Sep 2011
    Location
    The Netherlands
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    I think it's all down to the screen settings across various platforms. When im testing my projects, i notice that backgrounds are noticeably darker on the mac, then on the windows computer.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,733
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Color fidelity is a very sticky issue, even in print design. While the true variance lies in the user setting , Macs and PCs have been noted to have very different GAMMA settings. Unless you limmit your palette, chances are that trying to correct one will impinge on the other. I got an ARNOVA 10G2 tablet and was surprised to see how much DARKER android seemed... and then there was the viewing angle issue. As long as your SPECTRUM moves in unison, no one will really notice (unless they some how run the devices side by side).

  4. #4
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    what I'm noticing is a very very marked difference between safri on my mac and safai on my ipad. it looks like a completely different colour.

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also all the other colours of bgs seem to be fairly regular between each platform so it's only affecting the transparent background image.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    It may be the png gamma problem and you could try running the image through pngcrush to remove the extra information. I never save images using photoshop as the colours are always different but Fireworks on the other hand seems to produce consistent results.

    Do you have a link we could look at and see if we get the same results?

  7. #7
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't i'm afraid as it's a client's private work but i'll supply images

  8. #8
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here are images of a section that demonstrate the problem. Admittedly the ipad one is taken on a phone camera but you can see the discrepancy especially when the transparent image is overlaid on the white background, it's a significant difference. I also designed this site and my client will notice the discrepancy so I need to find a solution

    safari-ipad-bg.jpgsafari-mac-bg.jpg

  9. #9
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all your help and for the link as it made me think about how I compressed it and i compressed it without adding the convert to sRGB option and it's all come out pretty much the same now

    thanks for the help :-)

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Glad it helped


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •