0

I'm creating a site now and I use fullpage.js . Until I put some image in background it seems fine (perhaps because there was no way to tell if it was happening). I added a background and now I can see that:

  1. On initial page render first page/section is not full screened (there is a white bar on bottom - top of next section)
  2. When page is resized up or down the bar disappears
  3. When resized back to initial size - no white bar
  4. When refreshed (on any size) - white bar appears.
  5. the white bar is always (on different monitor sizes/initial window sizes) 17px in height

I can provide all additional info such as screenshots,code, css or any info needed.

body:

<div id="fullpage">
    <div class="section" data-anchor="top">{#top#}
        <div class="bg-photo"></div>
        <div class="content">
            <div>
                <h1>DO ROZPOCZĘCIA POZOSTAŁO</h1>
                <div class='next-event'></div>
            </div>
            <div class="joinButton">
            Dołącz do wydarzenia
            </div>
            <div class="scroll-icon">
                <img src="{{ 'assets/images/scroll_ico.png'|theme }}">
            </div>
        </div>
    </div>
    <div class="section" data-anchor="about">
        o itad + social
    </div>
</div>

css:

.bg-photo {
    background-image: url("../images/bg_blurred.png");
    background-repeat: no-repeat;
    width:100%;
    height:100%;
    background-size:cover;
    }
.content {
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    background:rgba(11,17,28,0.75);
    }

Turns out that on IE works fine, but problem occurs on Firefox,Chrome and Safari.

Venom Morph
  • 1
  • 1
  • 5
    Please provide the relevant code. – Szabolcs Páll Nov 18 '15 at 09:19
  • Sounds like an empty scrollbar. Do you have a live link maybe? – Shikkediel Nov 18 '15 at 10:39
  • Site is in maintenance mode, so You have to [log in.](http://www.itacademy.uniwersytetradom.pl/backend) _login_ **stackoverflow** _pass:_ **1234** – Venom Morph Nov 18 '15 at 10:48
  • I wonder what is a "white bar". – Alvaro Nov 18 '15 at 11:11
  • Top of next section - I have white background on all sections except first one so it displays as white bar – Venom Morph Nov 18 '15 at 11:21
  • Quick fix could be to add `min-height: 100%` to `.section`. No idea why it's calculating incorrectly. – Shikkediel Nov 18 '15 at 13:44
  • Something weird going on there though, with all sections having `id="null"`. – Shikkediel Nov 18 '15 at 13:51
  • @Shikkediel .what You mean id="null"? I didn't set any IDs. Or are they something put by the fullpage script? the empty scrollbar sound like good idea(when calculating leacing space for scrollbar) it will explain why it's always 17px but on the other hand,there is never horizontal scroll on the page. – Venom Morph Nov 18 '15 at 14:06
  • min-height fix helped. Still wonder what cause this though. – Venom Morph Nov 18 '15 at 14:23
  • OK it helped only for chrome. No improvement on Safari and in Firefox helped only partially. image in background is not "full height",leaving space above and under. – Venom Morph Nov 18 '15 at 14:35
  • Alright, I checked on Firefox only and thought the border was supposed to be there. The `null` ids must have been set by the script, I have seen it before **[here](http://stackoverflow.com/q/33003447/3168107)** and it's very elusive. You can view them with developer tools. Couldn't say what causes it *exactly*. More than a few issues with that plugin lately. – Shikkediel Nov 18 '15 at 15:12

1 Answers1

0

I tried a very simple way and solve it fortunately.

Add <div id="head"></div> as the first line in <div class="section"></div>.

And set css style:

#head {
height: 1px}

So I think it just need some element at the very top of the section.

Qianchen
  • 1
  • 1