Why Does Box Shadow on Table Rows Behave Inconsistently Across Browsers?

Box Shadow on Table Rows Acting Erratically Across Browsers

Applying CSS box shadows to table rows presents inconsistencies in browser rendering. While some browsers display the shadow as intended, others fail to render it completely.

To address this issue, adding the transform: scale(1,1) property with box-shadow solves the problem. This ensures consistent shadow rendering across browsers.

Updated CSS:

<code class="css">tr:hover {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}</code>

Updated jsFiddle: https://jsfiddle.net/ampicx/5p91xr48/

The above is the detailed content of Why Does Box Shadow on Table Rows Behave Inconsistently Across Browsers?. For more information, please follow other related articles on the PHP Chinese website!