Skip to content
This repository was archived by the owner on Apr 20, 2023. It is now read-only.

PIE background scrolls doubly in IE8 Standards mode #306

Open
CJDennis opened this issue Sep 3, 2014 · 5 comments
Open

PIE background scrolls doubly in IE8 Standards mode #306

CJDennis opened this issue Sep 3, 2014 · 5 comments

Comments

@CJDennis
Copy link

CJDennis commented Sep 3, 2014

I have a <div> which contains my PIE-d elements. The div has the following style:

position: absolute;
overflow-y: auto;
top: 2.5em;
bottom: 0px;
left: 0px;

When I scroll the content within it, the backgrounds scroll by twice as much as the elements. E.g. the elements scroll up by 100px but the backgrounds scroll up by 200px. This only happens in IE8 Standards mode. IE7 Standards mode and Quirks mode do not display this bug.

I am using the latest PIE 1.x as of 3 Sept 2014.
@CJDennis
Copy link
Author

CJDennis commented Sep 4, 2014

I just discovered by fiddling with IE Developer Tools that setting position: relative; on the parent element of the PIE-d element fixes the issue. Standard IE craziness! That trick seems to fix 99% of IE CSS issues! I'll see if I can write a minimal demo with the bug.

@CJDennis
Copy link
Author

CJDennis commented Sep 4, 2014

This is the minimal code:

<!DOCTYPE html>
<html>
  <head>
    <title>PIE test</title>
    <style type="text/css">
      div.scroller {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        width: 100%;
        overflow-y: auto;
      }

      .pie {
        position: relative;
        border: 1px solid #000080;
        border-radius: 30px;
        padding: 10px 16px;
        margin: 8px 20px;
        -pie-background: linear-gradient(#EDF, #DBE);
        behavior: url("pie/PIE.htc");
      }

      .half-page {
        height: 50%;
      }

      .fix-pie {
        /*position: relative;*/
      }
    </style>
  </head>
  <body>
    <div class="scroller">
      <div class="half-page"></div>
      <div class="fix-pie">
        <p class="pie">Test</p>
        <p class="pie">Test</p>
        <p class="pie">Test</p>
        <p class="pie">Test</p>
      </div>
      <div class="half-page"></div>
    </div>
  </body>
</html>

If you uncomment position: relative; on .fix-pie scrolling works as expected. In fact, having any ancestor with position: relative; will fix this scrolling issue.

@lojjic
Copy link
Owner

lojjic commented Sep 4, 2014

This sounds a lot like issue #88.

@CJDennis
Copy link
Author

CJDennis commented Sep 6, 2014

Quite possibly. In issue #88 what happens after page load if you scroll it back to the top? Is the container correctly positioned then? If not it's a different issue or a different manifestation of the same issue.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@lojjic @CJDennis and others