Shadow Behavior on <td> Elements

Question

---

Update:

After I submitted the error report: https://bugs.chromium.org/p/chromium/issues/detail?id=763337 ,

It seems we could fix this in Chrome version 62.

---

Try pointing out the td elements of this fiddle in the latest versions of Chrome and Firefox.

Firefox works like a charm (in my opinion, the shadow box shouldn’t add anything to the width and height calculations), but Chrome sadly adds scrollbars (try moving the bottom right cell).

How can I prevent this, but still remain responsive?

This behavior only occurs when using the completely new version of Chrome. For me it:

Version 61.0.3163.79 (Official Build) (64-bit)

Just tested a piece of code on my laptop that had an older version installed. Result: no scroll bars during hovering. After the automatic update and restart, scroll bars appeared.

div { border: 1px solid green; width: 100%; overflow-x: auto; overflow-y: auto; } table { width: 100%; } td { border: 1px solid red; } td:hover { box-shadow: 2px 2px 15px -2px rgb(50, 50, 50); } 

 <div> <table> <tr> <td>This is some content</td> <td>This is some content</td> <td>This is some content</td> </tr> <tr> <td>This is some content</td> <td>This is some content</td> <td>This is some content</td> </tr> </table> </div> 

Answer 1

Looks like a Chrome bug on Windows only . I also tested on Google Canary (Chrome 63), and the problem persists, so it is possible that it cannot be fixed so soon.

The problem is caused by overflow: auto , in your case it can be easily solved by deleting it or setting it as visible (by default).

However, when you rotate the cells to the right (top and bottom), a scroll bar is displayed for the body. The solution can set overflow: hidden for the body so that the expected results are as required.

I would like to note that this is not a great solution, but I suggest using it temporarily until this error is fixed.

 body { overflow: hidden; } div { border: 1px solid green; width: 100%; overflow: visible; } table { width: 100%; } td { border: 1px solid red; } td:hover { box-shadow: 2px 2px 15px -2px rgb(50, 50, 50); } 

 <div> <table> <tr> <td>This is some content</td> <td>This is some content</td> <td>This is some content</td> </tr> <tr> <td>This is some content</td> <td>This is some content</td> <td>This is some content</td> </tr> </table> </div> 

Answer 2

I used flex-box as it is easy and very responsive.

Here is the code:

 div { border: 1px solid green; width: 100%; overflow-x: auto; overflow-y: auto; } table { width: 100%; } tr { display: flex; flex-wrap: wrap; flex-direction: row; } td { flex: 1; border: 1px solid red; } td:hover { box-shadow: 2px 2px 15px -2px rgb(50, 50, 50); } 

 <div> <table> <tr> <td>This is some content</td> <td>This is some content</td> <td>This is some content</td> </tr> <tr> <td>This is some content</td> <td>This is some content</td> <td>This is some content</td> </tr> </table> </div> 

Answer 3

I think with chrome. you can try -webkit-box-shadow: 5px 5px 15px -2px rgb (50, 50, 50);