小编god*_*rry的帖子

我正在尝试在 Angular 7 应用程序中调试 JS ( propellerjs ) 动画，该应用程序在 requestAnimationFrame 上运行但运行速度非常慢。

问题是 - 我在尝试记录性能配置文件时无法重现该问题 - 该应用程序在那里运行良好。

常规模式和性能配置文件记录模式有什么区别？我试图关闭所有扩展并重新启动浏览器，但这没有帮助。

您会注意到轮子在常规模式下旋转得非常慢，并且在我尝试使用探查器记录时旋转得又快又好。

我希望在分析器中看到性能问题，但是当我尝试录制时它运行良好。

我正在浏览React 文档，React.Children.map(children, function[(thisArg)])当他们同时将函数参数包装到方括号和圆括号中时，他们试图在这里表达的内容有点困惑function[(thisArg)]。谁能解释一下意思？

由于最新版本的 Microsoft Edge 已发布并使用 Blink - 使用 javascript 区分旧 Edge 和新 Edge 的正确方法是什么？

目前我计划navigator.userAgent检查是否有旧版本的 Edge（最多 18 个）

const isOldEdge = /edge\/([0-1][0-8]|[0-9]\D)/.test(navigator.userAgent.toLowerCase());

这是检测它的正确方法吗？

我有自定义图像框架（在本例中为笔记本电脑），并且我希望鼠标悬停时每个图像框架周围都有阴影过渡。在这里，我使用投影过渡，但我无法使用此解决方案实现平滑的跨浏览器行为。

在 Safari 中，过渡根本不起作用：

在 Chrome 中，它的效果要好得多，但仍然不理想 - 你可以注意到动画最后阴影是如何跳跃的：

我如何修复当前的解决方案，或者也许任何人都可以建议其他方法来实现相同的目的？我只能考虑带有opacity/scale动画的额外阴影图像，但这意味着对于我想要添加的每一帧 - 我将需要单独的图像作为阴影层，所以我希望社区有更好的解决方案。

UPD：不要忘记添加will-change: opacity@Stuart 提供的出色解决方案来修复 OSX Safari 渲染问题

.wrapper {
  position: relative;
  transition: filter .5s;
  display: inline-flex;
}

.content {
  top: 7px;
  bottom: 4px;
  left: 13px;
  right: 13px;
  overflow: hidden;
  position: absolute;
  background: #F4F4F5;
  z-index: 0;
}

img {
  position: relative;
  width: 100%;
  height: 100%;
}

svg {
  position: relative;
  z-index: 1;
}

.wrapper:hover {
  filter: drop-shadow(2px 2px 2px #44444444);
} …

据我了解，通过 // 设置的所有旋转都object.rotation.x适用object.rotation.y于object.rotation.z对象的轴，无论对象在场景中的位置如何。

但是在下面的代码中，在我设置简单的旋转值之后， box.rotation.y = PI/2 所有后续更改box.rotation.x似乎都不是在轴上旋转Box X Axis ，而是在 Box Z Axis轴上旋转

如果我改变它仍然会朝 另一个方向box.rotation.z 旋转。Box Z Axis

所以基本上问题是 - 旋转并Box X Axis进行Box Z Axis相同的旋转但方向不同。

我在这里做错了什么？Box Z Axis我如何在这里正确使用旋转，例如，如果我想在旋转后应用旋转Box Y Axis。

在这里我创建了沙箱来重现问题 https://stackblitz.com/edit/trhee-js-plane-rotation?file=index.js