Bug 173830 – dom change will cause jump when "container's -webkit-scroll-snap-type is mandatory" and "item's width is percent"

• Component: CSS
• Status: NEW

[zhouqi]

// HTML:
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

// CSS:
ul{
  display: flex;
  -webkit-overflow-scrolling: touch;
  -webkit-scroll-snap-type: mandatory;   // scroll-snap
  overflow-x: scroll;
}
li{
  -webkit-scroll-snap-coordinate: 0 0;
  width: 30%; // width is percent
}

// JS:
document.querySelector('ul').addEventListener('scroll', function(){
  Array.from(document.querySelectorAll('li')).forEach(function(li, index){
    li.innerText = Date.now();  // Change the item's dom
  })
})


Any dom change will cause the scroll position jump when "the li's width is percent" and "the ul's -webkit-scroll-snap-type is mandatory", vw\rem\em\px... will not cause this issue. This bug causes the horizontal scroll-snap with lazyload(lazyload will change the img src when scrolling) to be completely unavailable.

System：iOS 10.3 + Safari/WKWebview (mac safari 10.1.1 is ok)
DEMO: https://codepen.io/zhouqicf/pen/owGPKe
Bug Video: http://cloud.video.taobao.com/play/u/370670821/p/1/e/6/t/1/57871314.mp4

[Radar WebKit Bug Importer]

<rdar://problem/32981068>

[zhouqi]

any process?

I find any reflow will cause this bug. for example: 


.item{
    border: 6px solid transparent;
}
// reflow: this border-width change will cause this bug
.item.active{
    border-width: 10px;
}
// repaint: this border-color change will not cause this bug
.item.active{
    border-color: #fff;
}

[zhouqi]

scroll-snap-align has this bug also in iOS 11

.container{
    scroll-snap-type: mandatory;
}
.item{
    scroll-snap-align: start center;
}

[Wenson Hsieh]

(In reply to zhouqi from comment #3)
> scroll-snap-align has this bug also in iOS 11
> 
> .container{
>     scroll-snap-type: mandatory;
> }
> .item{
>     scroll-snap-align: start center;
> }

Scroll snap offsets jumping during layout is a known issue, and one that's tricky to fix. What's probably happening is that code to restore the active snap index (e.g. to keep the active scroll snap point the same after device rotation) is triggered as a post layout task after the layout happens due to reflow, which causes the scroll offset to try and jump in the middle of a scroll snap animation.

I have some ideas about how to decouple this mechanism to restore active scroll snap index restoration from the frame layout lifecycle...