小编IOI*_*OIO的帖子

大约两个月前,我们开始使用Rollbar通知我们Web应用程序中的各种错误.从那时起,我们偶尔会遇到错误:

ResizeObserver loop limit exceeded

令我困惑的是我们没有使用ResizeObserver,我调查了唯一一个我认为可能是罪魁祸首的插件,即:

Aurelia Resize

但它似乎也没有使用ResizeObserver.

令人困惑的是,这些错误消息自1月以来一直在发生,但ResizeObserver最近才向Chrome 65添加了支持.

给我们这个错误的浏览器版本是:

• Chrome:63.0.3239(超出ResizeObserver循环限制)
• Chrome:64.0.3282(超出ResizeObserver循环限制)
• 边缘:14.14393(SecurityError)
• 边缘:15.15063(SecurityError)

所以我想知道这是否可能是一个浏览器错误？或者可能是一个与实际无关的错误ResizeObserver？

嗨,那么让我先向您展示如何在SCSS中执行此操作:

$submenu-padding-left: 1.5em;

transform: translateX(calc(-#{$submenu-padding-left} + .5em));

哪个会编译为:

transform: translateX(calc(-1.5em - .5em))

基本上,SCSS允许我将减号-与变量连接起来,以便将其转换为负值.

使用CSS变量可以实现这一点吗？

这是最奇怪的事情，我以前曾多次使用过这种方法，但现在它似乎对我来说不起作用。

这是一个重复的问题，提供了此方法作为答案：

使用 CSS 保持 div 的纵横比

但由于某种未知的原因，它在 Firefox 和 Chrome 中对我来说是崩溃的。据我所知，它是根据我应用样式的元素的父元素计算填充...

在这种情况下，它不会查看.test，而是查看.parent计算填充：

.parent {
  width: 200px;
}

.test {
  width: 50px;
  background: red;
  padding-top: 100%;
}

<div class='parent'>
  <div class='test'></div>
</div>

我有许多正在制作动画的元素，我以一种不会导致任何浏览器绘制的方式开发这些元素。如果我在 Chrome Devtools 中打开“Paint Flashing”，我根本看不到任何油漆闪烁。但是，如果我记录表演，那么图表显示有很多时间花在绘画上。FPS 有时低至 15fps。

我实际上是在 Vue 中构建的，编译后的代码导致代码过多，无法粘贴到此处。我意识到动画有点坏了，我仍然需要计算一些时间等等 - 但就这个问题而言，我只关心性能。

我已经在 CodePen 上发布了编译后的代码：

https://codepen.io/IOIIOOIO/pen/gjBqyg

似乎 StackOverflow 要求我在这里发布一些代码，所以这里是只有一个元素的编译代码：

.circle {
  position: relative;
  width: 100%;
  padding-top: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.circle::before {
    content: "";
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    animation-name: switch;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1);
    animation-duration: 3s;
    animation-delay: inherit;
  }

.rotating-circle {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.rotating-circle--first-cycle {
    background-color: black; …