Firefox. С чем связана медленная прокрутка контента в #scroll-zone?

Teamur · №1

Код:

<!doctype html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #container {
      overflow: auto;      
      width: 100%;
      white-space: nowrap;
      font-size: 0;
      scroll-snap-points-x: repeat(100%);
      scroll-snap-type: mandatory;
      scroll-behavior: smooth;
    }
    .slide {
      width: 100%;
      height: 400px;
      display: inline-block;
    }
    #slide-1 {
      background: #ffe477;
    }
    #slide-2 {
      background: #0769ad;
    }
    #slide-3 {
      background: #c6c;
    }
    #scroll-zone {
      overflow-y: scroll;
      margin: 20px auto;
      width: 200px;
      height: 360px;
      background: #fff;
    }
    .items {
      margin: 10px auto;
      width: 120px;
      height: 400px;
    }
    #item-1 {
      background: #c02431;
    }
    #item-2 {
      background: #03a753;
    }
    #item-3 {
      background: #262626;
    }
  </style>
</head>
<body>
  <div id="container"> 
    <div id="slide-1" class="slide"></div>
    <div id="slide-2" class="slide">
      <div id="scroll-zone">
        <div id="item-1" class="items"></div>
        <div id="item-2" class="items"></div>
        <div id="item-3" class="items"></div>
      </div>
    </div>
    <div id="slide-3" class="slide"></div>
  </div>
</body>
</html>

А вот нормальный скроллинг:

Выделить код

Код:

<!doctype html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #0769ad;
    }
    #scroll-zone {
      overflow-y: scroll;
      margin: 40px auto;
      width: 200px;
      height: 360px;
      background: #fff;
    }
    .items {
      margin: 10px auto;
      width: 120px;
      height: 400px;
    }
    #item-1 {
      background: #c02431;
    }
    #item-2 {
      background: #03a753;
    }
    #item-3 {
      background: #262626;
    }
  </style>
</head>
<body>
  <div id="scroll-zone">
    <div id="item-1" class="items"></div>
    <div id="item-2" class="items"></div>
    <div id="item-3" class="items"></div>
  </div>
</body>
</html>

В чём проблема? Почему при использовании scroll-snap-points внутри секции такой медленный скроллинг? Помогите пожалуйста, я в отчаянии (

Отредактировано Teamur (15-10-2015 22:42:44)

Полезная информация

№115-10-2015 22:33:49

Firefox. С чем связана медленная прокрутка контента в #scroll-zone?

Код:

Код:

Board footer