Strange behaviour Scroll Bar in Internet Explorer

Strange behaviour Scroll Bar in Internet Explorer

I am using Perfect-Scrollbar in combination with an iframe. So far so good in chrome, firefox and safari but when i am using internet explorer 8-11 I get a strange behaviour.

When i hoover over the iframe i normally see the scrollbars directly but in Internet Explorer they only appear when i am directly above them. Anywhere else in the iframe they don't show up?

In the <head> i am using this:

  1. <link href="src/perfect-scrollbar.css" rel="stylesheet">
  2.       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  3.       <script src="src/jquery.mousewheel.js"></script>
  4.       <script src="src/perfect-scrollbar.js"></script>
  5.       <style>
  6.         .contentHolder {
  7. position: relative;
  8. margin: 0px auto;
  9. padding: 0px;
  10. width: 300px;
  11. height: 480px;
  12. overflow: hidden;
  13. }
  14.         .contentHolder .content { background:;); width: 300px; height: 500px; }
  15.         .spacer { text-align:center }
  16.       </style>
  17.     <script>
  18.       jQuery(document).ready(function ($) {
  19.         "use strict";
  20.         $('#Default').perfectScrollbar();
  21.       });
  22.     </script>

  23. And in the body: 

  24. <div id="Default" class="contentHolder"><iframe src="test.php" scrolling="no" width="100%" height="1550px" frameborder="0">
  25. <p>Your browser does not support iframes.</p>
  26. </iframe><div class="content">

  27.       </div></div>




Any ideas how to solve this?