Chrome中的CSS旋转切割表答案

【问题标题】：CSS rotate cutting off table in ChromeChrome中的CSS旋转切割表
【发布时间】：2017-10-24 07:18:48
【问题描述】：

所以我一直在修补这个似乎突然出现的问题。我似乎找不到任何相关的问题，所以它可能只是与上次 Chrome 更新有关，但我想确保我没有遗漏任何明显的东西。

当我尝试使用 rotateX(45deg) 将表格元素向后旋转时，它将切断网格的右侧。当我减少旋转时，这种切断继续，直到它停止的 20 度。更改轮换是解决我目前发现的问题的唯一方法。

这是一个CodePen，它被切断了。这是旋转表格的部分：

.perspective-table {
    width: 200%;
    height: 100%;
    margin-left: -50%;
    background-color: black;
    border-collapse: collapse;
    position: absolute;

    -webkit-transform: rotateX(45deg);
    transform: rotateX(45deg);

    -webkit-box-shadow:0 0 30px 3px #cc39e0;
    -moz-box-shadow: 0 0 30px 3px #cc39e0;
    box-shadow:0 0 30px 3px #cc39e0;
}

提前致谢，如果需要更改或从帖子中删除任何内容，请告诉我！

编辑：自发布以来，我在 Chrome 的 PC (1920x1080) 上对此进行了测试，但没有遇到问题。所以这可能是部分原因。

规格：

Chrome (v62.0.3202.62)
MacOS 2560 x 1600 (v10.12.5)

【问题讨论】：

你的 codepen 似乎工作正常，我正在使用 chrome
我在我的 PC 上进行了一些测试，但无法重现该问题，因此这可能与我的特定分辨率或 Chrome 的 Mac 版本有关。用一些相关规范更新了帖子。

标签： html css css-transforms

【解决方案1】：

所以看起来问题自行解决了。这可能是由 Chrome 62（10 月 17 日）引起的错误，并在 Chrome 63（12 月 5 日）中解决。

如果其他人遇到此问题，请尝试更新您的网络浏览器。

【讨论】：