Firefox 60+的元素宽度错误

Question

在Firefox 64.0（Linux x64）中，与在Chrome 69.0，Opera 55.0和Waterfox 52.2.6（我认为与Firefox 52非常相似）中获取元素的宽度不同。 / p>

有问题的元素的宽度为258px，除Firefox外，所有浏览器都对此表示同意。 Firefox由于某种原因似乎正在获得父容器的宽度。

我一直在使用.offsetWidth，但是我也尝试使用.clientWidth和.getBoundingClientRect().width，它们都返回相同的指标。

调试日志记录语句：

console.log(sampleElement,
            sampleElement.offsetWidth,
            sampleElement.clientWidth, 
            sampleElement.getBoundingClientRect().width);

FF：{element} 1024 1024 1024

（该值根据父母的宽度而变化-见下文）

Chrome浏览器：{element} 258 258 258

Opera：{element} 258 258 258

Waterfox：{element} 258 258 258

其中{element}是控制台中的HTML元素。有趣的是，在Firefox中，对于所有这些width属性，该表示形式都显示有正确的值：

div.project-icon
  // ..
  clientWidth: 258
  // ..
  offsetWidth: 258
  // ..
  scrollWidth: 258

有关该元素的更多信息：

• 它是动态创建的，并且位于可水平滚动的flexbox相对位置的容器中。
• Firefox所说的宽度是父元素的宽度加上16像素（但父元素没有填充/边距）。

Firefox检查器中元素的图像：

我似乎无法在代码段中重现错误，但这是用于生成要尝试获取其宽度的元素的代码，以及获取该宽度的代码。

let scrollContainer = document.querySelector('#project-scroller');
let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
data.forEach((datum, index) => {
  let div = document.createElement('div');
  div.classList.add('project-icon');
  div.dataset.index = index;
  div.addEventListener('click', function() {
    debounceScrollHandler(this);
  });
  let image = document.createElement('img');
  const images = ['https://imgur.com/BkvxnV5l.png'];
  image.src = images[Math.floor(Math.random() * images.length)];
  div.appendChild(image);
  scrollContainer.appendChild(div);
});

let n = data.length;
let cur = Math.floor(n / 2);

// set to center
let sampleElement = scrollContainer.firstChild;
let sampleElementWidth = sampleElement.getBoundingClientRect().width + parseInt(getComputedStyle(sampleElement).marginLeft.slice(0, -2)) * 2;
scrollContainer.scrollLeft = Math.floor((sampleElementWidth * (n - (n % 2 - 1)) - scrollContainer.getBoundingClientRect().width) / 2);

console.log(sampleElement, sampleElement.offsetWidth, sampleElement.clientWidth, sampleElement.getBoundingClientRect().width);

#project-scroller {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow-x: scroll;
  position: relative;
  
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
#project-scroller::-webkit-scrollbar {
  display: none;
}
.project-icon {
  flex: 0 0 258px;
  width: 258px;
  height: 258px;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.project-icon:first-child {
  background-color: green;
}
.project-icon > img {
  width: 128px;
  height: 128px;
  border-radius: 0.5em;
}
.project-icon.centered > img {
  width: 256px;
  height: 256px;
}

<div id='project-scroller'></div>

更新（根据评论）：我的代码在FF版本59及更低版本中有效，但在60版本及更高版本中无效。这有意义吗？

更新2 ：我意识到，如果我设置一个小的超时时间（例如10毫秒）并运行相同的代码，则宽度是正确的。从CSS属性获取宽度是否有延迟（宽度来自CSS类）？