Firefox 延迟调整 javascript/jquery

Question

最近我很难使用 firefox（最新的 56.0.2），它似乎不能容忍子像素渲染（它似乎以自己的方式管理小数像素）。

例如，假设我有 7 个选项卡浮动在包含 div 的内容中，并且我为这些选项卡中的每一个应用了等于 "containerDiv/7" 像素的宽度，这将在Chrome、Safari、Opera（我测试过的那些）这些选项卡将水平排列，而在 Firefox 中，最后一个选项卡会在调整 window 大小时上下闪烁。调整大小结束后，它可能会排成一行或不排成一行，具体取决于它对像素值进行四舍五入的方式。

我做了一些研究，似乎所有浏览器在管理屏幕像素时都不会以相同的方式处理小数。

当然，这可以用 CSS 和百分比来处理，但是当您的某些元素有边框而其他元素没有时，这就变得困难了。

所以，我测试了一个小 jquery 脚本来解决这个问题：

function testWidth(){
    var containingDivWidth= $('#containingDiv').width();
    var numBorders = 6;
    var numItems   = 7;
    var totalWidth = containingDivWidth - numBorders;       
    var itemWidth  = (Math.round(totalWidth/numItems))      
    var remainder  = totalWidth - (itemWidth*numItems);

    $('.tab').css('width',itemWidth+'px');
    $('.tab:nth-child(7)').css('width',itemWidth+remainder+'px');
};

$(document).ready(function()      {testWidth();});  
window.onresize = function(event) {testWidth();};

当然，这不是最优的，但很容易阅读。

这里是html，以防万一

<div id="containingDiv">
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
</div>

这里是CSS

<style>
    #containingDiv{
        width:100%;
        height:40px;
        background:red;
    }
    .tab{
        float:left;
        height:40px;
        border-right:1px solid black;
        background:green;
    }
    .tab:nth-child(7){
        border-right:none;
    }
</style>

所以，是的，现在它适用于所有浏览器，包括 Firefox。 ...当 window 不调整大小时。

如果 window 调整大小，Firefox 将继续像以前一样运行，因为最后一个选项卡在调整大小时上下闪烁。

但有一点不同：在调整大小结束时，选项卡将排成一行。我实时检查过，所有选项卡的总宽度始终等于容器的宽度 div，在任何时候，即使在调整大小时也是如此。

因此，似乎 Firefox 在调整大小时重新计算选项卡宽度需要几分之一秒。

这一假设得到以下事实的支持，即问题仅在水平向下调整 window 大小时出现，而不是向上调整。这似乎表明，在缩小尺寸时，选项卡的总和在几分之一秒内大于包含 div，直到计算完成。显然，在调整大小时，包含的 div 总是更大，所以不会出现问题。所以这对我来说看起来像是一个 latency/delay 问题。

无论如何，我回到原点。子像素渲染不起作用，重新计算时调整大小似乎意味着延迟，而这两者，仅适用于 Firefox（相对于 Chrome、Safari 和 Mac 上的 Opera，在这两种情况下都表现良好）。

我能做什么？

注意 1：我可以为此使用表格，但此示例只是一个示例，因为当我需要这种无法使用表格处理的计算时，会有多个实例。这不是我第一次在各种情况下使用 Firefox 遇到这个问题。这只是将问题置于清晰上下文中的示例。因此，特别针对此示例提出表之类的变通方法无济于事。

注2：但是，如果有办法解决子像素渲染问题，我更愿意创建一个函数来防止获取带小数的像素，因为这看起来很耗时对其他浏览器来说微不足道（尽管 "on resize" 延迟问题困扰着我）。而且，像这样的功能，其中一个选项卡总是比其他选项卡更大或更窄，这作为解决方案并不优雅。

谢谢！

Answer 1

对于所有 CSS 没有 javascript 的解决方案，请尝试在您的容器上设置 display: flex，并在容器的子容器上设置 flex: 1 1 auto。这应该可以防止您在 Firefox 中看到的抖动发生。

设置 flex: 1 1 auto 让 flexbox 自动在 flex 行中的每个子项之间分配宽度。

要全面了解 flexbox，请查看 this guide。

#containingDiv{
        width:100%;
        height:40px;
        background:red;
        display: flex;
    }
  .tab{
      flex: 1 1 auto;
      height:40px;
      border-right:1px solid black;
      background:green;
  }
  .tab:nth-child(7){
      border-right:none;
  }

<div id="containingDiv">
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
</div>

Firefox 延迟调整 javascript/jquery

Firefox on resize delay with javascript/jquery

firefox

jquery

css-float

window-resize