fixed translate3d test

app/assets/javascripts/fly_out_nav.js

@@ -18,7 +18,7 @@ export const showSubLevelItems = (el) => {
   const top = calculateTop(boundingRect, $subitems.offsetHeight);
   const isAbove = top < boundingRect.top;
 
-  $subitems.style.transform = `translate3d(0, ${top}px, 0)`;
+  $subitems.style.transform = `translate3d(0, ${Math.floor(top)}px, 0)`;
 
   if (isAbove) {
     $subitems.classList.add('is-above');

spec/javascripts/fly_out_nav_spec.js

@@ -8,6 +8,7 @@ describe('Fly out sidebar navigation', () => {
   let el;
   beforeEach(() => {
     el = document.createElement('div');
+    el.style.position = 'relative';
     document.body.appendChild(el);
   });
 
@@ -89,7 +90,7 @@ describe('Fly out sidebar navigation', () => {
 
   describe('showSubLevelItems', () => {
     beforeEach(() => {
-      el.innerHTML = '<div class="sidebar-sub-level-items"></div>';
+      el.innerHTML = '<div class="sidebar-sub-level-items" style="position: absolute;"></div>';
     });
 
     it('adds is-over class to el', () => {
@@ -111,18 +112,17 @@ describe('Fly out sidebar navigation', () => {
     });
 
     it('sets transform of sub-items', () => {
+      const subItems = el.querySelector('.sidebar-sub-level-items');
       showSubLevelItems(el);
 
       expect(
-        el.querySelector('.sidebar-sub-level-items').style.transform,
-      ).toBe(`translate3d(0px, ${el.offsetTop}px, 0px)`);
+        subItems.style.transform,
+      ).toBe(`translate3d(0px, ${el.getBoundingClientRect().top}px, 0px)`);
     });
 
     it('sets is-above when element is above', () => {
       const subItems = el.querySelector('.sidebar-sub-level-items');
       subItems.style.height = `${window.innerHeight + el.offsetHeight}px`;
-      subItems.style.position = 'absolute';
-      el.style.position = 'relative';
       el.style.top = `${window.innerHeight - el.offsetHeight}px`;
 
       spyOn(subItems.classList, 'add');