[Webkit-unassigned] [Bug 173830] New: dom change will cause jump when "container's -webkit-scroll-snap-type is mandatory" and "item's width is percent"

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=173830

            Bug ID: 173830
           Summary: dom change will cause jump when "container's
                    -webkit-scroll-snap-type is mandatory" and "item's
                    width is percent"
           Product: WebKit
           Version: Safari 10
          Hardware: iPhone / iPad
                OS: iOS 10.3
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: zhouqicf at gmail.com

// 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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20170626/dbb51d44/attachment.html>