Firefox 下滚动条的图像大小错误

Question

这是问题所在：

对于 Chrome、Opera、Safari 一切都很好：

chrome, opera, edge thumb-bar

但是 firefox 有一个问题：

firefox thumbbar

问题是由 x-scrollbar 推送每个“.thumbs”和他们 children 了。由于 children 保持 aspect/ratio height: 100% 和 object-fit 的组合包含，除了在 firefox 下，它们之间不留任何间隙。似乎“.thumbs”不想正确环绕其 child 图像。高度得到调整，但宽度没有调整。我已经尝试了不同的 flex: - 简写组合，但没有任何帮助。

    .scroll_wrapper {
      position: relative;
      overflow: hidden;
      height: 100px;
    }

    .thumbs_container {
      position: absolute;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flex;
      display: -webkit-flex;
      display: flex;
      flex-flow: row nowrap;
      overflow-x: scroll;
      height: 100%;
      width: 100%;
    }

    .thumbs {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flex;
      display: -webkit-flex;
      display: flex;
      flex-flow: column nowrap;
      height: 100%;
    }

    .thumbs_imgs {
      height: 100%;
      object-fit: contain;
    }

    <div class="scroll_wrapper">
      <div class="thumbs_container">
        <div class="thumbs">
          <img src="http://placeimg.com/170/110/any" alt="1" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/115/any" alt="2" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/120/any" alt="3" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/125/any" alt="4" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/130/any" alt="5" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/135/any" alt="6" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/135/any" alt="7" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/140/any" alt="8" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/145/any" alt="9" class="thumbs_imgs"/>
        </div>
        <div class="thumbs">
          <img src="http://placeimg.com/170/150/any" alt="10" class="thumbs_imgs"/>
        </div>
      </div>
    </div>

Answer 1

我找到了一个带有 js-workaround 的解决方案：

firefox 错误：

js 循环遍历每个 img 的宽度，并为每个父“.thumbs”提供相应的宽度。
x-滚动条隐藏:

-js获取外层高度.scroll-wrapper
-js 获取.thumbs_container - .thumbs 的差值来获取滚动条的宽度（具体针对每个浏览器，因为不同） -js 给出 .scroll-wrapper + scrollbar-height 的高度为 .thumbs_container

window.onload = function() {
      scrollbarHide()
    }

    function scrollbarHide(){
      var modalThumbsScrollWrapper = document.getElementsByClassName("scroll_wrapper")[0];
      var modalThumbsScrollWrapperHeight = modalThumbsScrollWrapper.offsetHeight;
      var modalThumbsContainer = document.getElementsByClassName('thumbs_container')[0];
      var modalThumbsContainerHeight = modalThumbsContainer.offsetHeight;
      var modalThumbs = document.getElementsByClassName('thumbs')[0];
      var modalThumbsHeight = modalThumbs.offsetHeight;
      var scrollbarHeight = modalThumbsContainerHeight - modalThumbsHeight;
      var newModalThumbsContainerHeight = modalThumbsScrollWrapperHeight + scrollbarHeight;

      modalThumbsContainer.style.height = newModalThumbsContainerHeight + "px";
      modalThumbsWidthCorrectionFF() 
    }

    function modalThumbsWidthCorrectionFF(){  
        var modalThumbs = document.getElementsByClassName('thumbs');
        var modalThumbsLength = modalThumbs.length;
        var modalThumbsImgs = document.getElementsByClassName('thumbs_imgs');
        for (var i = 0; i < modalThumbsLength; i++) {
          modalThumbs[i].style.width = modalThumbsImgs[i].offsetWidth + "px";
        }
    }

.scroll_wrapper {
          position: relative;
          overflow: hidden;
          height: 100px;
        }

        .thumbs_container {
          position: absolute;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flex;
          display: -webkit-flex;
          display: flex;
          flex-flow: row nowrap;
          overflow-x: scroll;
          height: 100%;
          width: 100%;
        }

        .thumbs {
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flex;
          display: -webkit-flex;
          display: flex;
          flex-flow: column nowrap;
          height: 100%;
        }

        .thumbs_imgs {
          height: 100%;
          object-fit: contain;
        }

<div class="scroll_wrapper">
          <div class="thumbs_container">
            <div class="thumbs">
              <img src="http://placeimg.com/170/110/any" alt="1" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/115/any" alt="2" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/120/any" alt="3" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/125/any" alt="4" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/130/any" alt="5" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/135/any" alt="6" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/135/any" alt="7" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/140/any" alt="8" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/145/any" alt="9" class="thumbs_imgs"/>
            </div>
            <div class="thumbs">
              <img src="http://placeimg.com/170/150/any" alt="10" class="thumbs_imgs"/>
            </div>
          </div>
        </div>

Firefox 下滚动条的图像大小错误

wrong image sizing with scrollbar under firefox

firefox

scaling

image