CODEWITHSUNDEEP
jqueryinternet-explorerscrolltovisual-glitch
Nathan
Nathan

Reputation: 53

jQuery ScrollTo causing elements to disappear in IE

I've been developing a site, which relies on the jquery ScrollTo plugin to move between pages horizontally. Each "page" is a 100% x 100% section, with a wrapper div inside, and then absolutely positioned elements.

This has worked 100% perfectly in all browsers except IE of course. In all versions of IE (even 10), content elements are disappearing, and only appear if hovered over or selected in some way.

Here's a video of the issue in action and the dev page in question:

It's really bizarre and inconsistent, with some elements appearing some of the time, sometimes partially, but usually not at all. Resizing the window makes only the elements currently in the viewport appear, but not outside it (and if you scroll out and back, they glitch out again). Removing ScrollTo and using the default anchor behaviour is fine, but nothing else I can do seems to make a difference.

Google searches on the issue have turned up absolutely nothing.

The basic structure of the content is effectively:

<section id="content">
    <div class="mask">
        <section id="pagename">
            <div class="wrap">
                <div></div>
                <div></div>
            </div>
        </section>
        <section>
            <div class="wrap">
                <div></div>
                <div></div>
            </div>
        </section>
    </div>
</section>

CSS:

#content       {width: 100%; height: 100%; overflow: hidden; }
#content .mask {width: 800%; height: 100%;}
section        {position: relative; display: block; width: 12.5%; height: 100%; float: left;}
.wrap          {position: absolute; display: block; top: 50%; left: 50%; height: 860px; margin-top: -430px; width: 860px; margin-left: -430px; overflow: visible;}

The divs within .wrap are then absolutely positioned around the page.

Everything is actually in the right spot, and the content renders correctly (once it's visible). And it seems to be just the contents of .wrap where the issue starts (setting a test background on .wrap shows that it doesn't glitch, just it's contents).

If anyone can shed some light on what is causing this issue, and what will make it behave would be deeply appreciated.

Cheers, Nathan

Upvotes: 1

Views: 448

Answers (1)

Nathan
Nathan

Reputation: 53

Alrighty, I've solved this issue.

Elsewhere on the page (not within that #content section), I had a separate div which was fixed position. For whatever reason, keeping this fixed is what was causing IE issues with other elements scrolling in to view. Changing that div to absolute positioning (not an issue in this case, as all the scrolling was done within the #content section) made all the difference.

I should add that jQuery ScrollTo had nothing to do with this (removing all scripts and using overflow auto on #content to get scrollbars, showed that the issue even happened without it). It's purely a rendering issue with scrolling elements over the top of fixed positioned elements.

Upvotes: 1

Related Questions