Aurelia: Table + CSS

Question

эта проблема возникает на Google Chrome и, то есть, firefox работает нормально.

после прокрутки стола предварительный просмотр изображения отключается от исходного положения.

без прокрутки всех строк работает.

изображение превью видно когда hover таблица строка.

export class App { 
    data: Array<number> = []; 

    constructor() { 
     for (let i=0; i<100; i++) { 
      this.data.push(i); 
     } 
    } 
} 


<div> 
    <table> 
     <thead> 
     <tr> 
      <th>ID</th> 
     </tr> 
     </thead> 
    </table> 
</div> 
<div style="overflow-y: auto; height: 200px;"> 
    <table> 
     <tbody> 
      <tr repeat.for="d of data"> 
       <td> 
        <div class="preview">${d} 
         <span><img src="http://science-all.com/images/wallpapers/image/image-6.jpg" style="height: 200px;"/></span> 
        </div> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

вот пример plunkr

любой CSS исправить или обойти?

спасибо.

Answer 1

<template> 
    <div> 
    <table> 
     <thead> 
     <tr> 
      <th>ID</th> 
     </tr> 
     </thead> 
    </table> 
    </div> 
    <div style="overflow-y: auto; height: 200px;"> 
    <table> 
     <tbody> 
     <tr repeat.for="d of data"> 
      <td> 
      <div class="preview"><div>${d}</div> 
       <div id="imgdiv"><img src="http://science-all.com/images/wallpapers/image/image-6.jpg" style="height: 200px;"/></div> 
      </div> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</template> 

и CSS

/* Стили идут сюда */

.preview #imgdiv{ 
    display: none; 
    float: left; 
    position:absolute; 

} 
.preview 
{ 
    position:relative; 
} 

.preview:hover #imgdiv{ 
    display: block; 
    margin: 5px 5px; 
    margin-left:20px; 
}