css top propriety gets wrong in Firefox

This very simple example fails in Firefox (24 and 26):

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset=utf-8 />
  <title>splitter</title>
  <style type="text/css">
       div[splitter]{
           height:200px;
           width: 800px;
           border: 1px solid black;
       }
       .hpane2{
           top: 0px;
           left:100px;
           width:100px;
           border: 1px solid red;
       }
       .horizontal.split-handler{
           width: 4px;
           height: 100%;
           background-color: black;
       }
   </style>
</head>
<body>
<div style="padding:30px">
test
</div>
  <div splitter>
      <div>1 Lorem ipsum dolor </div>
      <div class="hpane2">2 est iusto mollitia nisi odio quas rerum totam?</div>
  </div>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
      <script src="libs/splitter/splitter.js"></script>
  <script>
    angular.module('myApp', ['splitter']);
  </script>
</body>
</html>

As you'll see, there is a difference in the way firefox and chrome compute the css top property of split-handler : firefox makes it 87px while chrome makes it auto (and gets a good rendering). The dirty trick I found was to comment the line 133 of splitter.js:

          handler.css(topProp, elementTop);

Maybe it's a bug in firefox, but I thought it might be useful to document this... It happenned to me while using the splitter after a bootstrap jumbotron.

chaosim / splitter

css top propriety gets wrong in Firefox #1