CODEWITHSUNDEEP
cssgoogle-chromesafariwebkit
David Savage
David Savage

Reputation: 1552

Strange webkit background issue

[URL removed per my bosses request] - please see screenshot in first comment to see the bug that was occuring.

Check that site out. For some reason, sometimes when loading the login page I get a dark stripe behind the login box (this only shows up in Chrome and Safari). If you don't see it, try Shift + Refresh a couple of times. Clicking inside the form anywhere or trying to inspect the elements seems to remove this dark box (usually, not always). I assume it is because I have an overlay that is showing on the page when trying to login. However, the overlay is set to display: none, so it should not be possible to see it. This makes the page look really ugly upon loading, so it'd be awesome if I could remove it. Any help is greatly appreciated!

Upvotes: 0

Views: 577

Answers (2)

cyreb7
cyreb7

Reputation: 317

I dismantled the website and isolated the problem:

<!doctype html>
<html>
    <head>
    <style>
      @-webkit-keyframes spin {
        100% { -webkit-transform:rotate(100deg); }
      } 

      body {
        background-image: url("login-bg.jpg");
      }

      div {
        z-index: -1;
        position: absolute;
        -webkit-animation: spin 0.7s linear infinite; 
      }

      </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

In your page, the animation is applied to the div with class="loading dead-center". My best suggestion is to try using display: none; instead of z-index: -1; to hide the animation.

Upvotes: 0

ZanderKruz
ZanderKruz

Reputation: 106

So I copied your CSS and HTML and made a local version to solve this.

Here is what I did to fix your problem.

A: I set an explicit height of 100% on your body tag (to prevent any cropping or content)

B: Your margin top of your Section element is being merged or inherited (not quite sure what the term is) by your Body element. so I set margin-top:0; on your section.login-form and put it as "padding-top:45px;" directly on the body.

in summary this is the CSS I used 

    body {
      background: url("login-bg.jpg") repeat-x scroll center top #2b87ae;
      color: #5c5e5e;
      font-family: 'OpenSansBold', sans-serif;
      height: 100%;
      padding-top: 45px;
    }

    body section.login-box {
      margin: 0 auto;
    }

I didn't include all your .login-box CSS but the pertinent line is 210.

Let me know how that works for you.

Upvotes: 3

Related Questions