AngularJS日历年份下拉框PC正常平板端滚动后消失问题咨询

• 触摸滚动事件冒泡冲突：多数AngularJS生态的日期组件（包括原生ng模块、早期ui-bootstrap datepicker）没有做平板端触摸事件的拦截处理，年份下拉容器本身配置了固定高度与滚动属性，平板端手指滑动滚动时，事件会同时冒泡到外层页面容器，组件内置的滚动监听逻辑会误判滚动边界，如果组件开了长列表虚拟渲染，就会直接把回滚路径上的年份选项从DOM中移除，且没有绑定触摸滚动的重绘触发逻辑。PC端用鼠标滚轮滚动不会触发多容器事件冒泡，因此功能正常。
• 浏览器硬件合成层裁剪bug：平板端移动端浏览器默认会对可滚动区域开启硬件加速，单独分配图形合成层。如果下拉组件的任意祖先元素设置了overflow: hidden、transform: translateZ(0)或者-webkit-overflow-scrolling: touch属性，年份选项滚动到合成层计算的可视边界外时，会被浏览器直接判定为不可见元素跳过绘制，回滚时不会自动触发重绘。PC端浏览器没有默认开启触摸滚动的合成层优化，不会触发该裁剪逻辑。
• 组件高度计算兼容性问题：AngularJS 1.x版本的内置日期组件，下拉可视区域高度是基于PC端鼠标事件、窗口视口高度静态计算的，平板端打开下拉时如果触发过软键盘弹出、横竖屏旋转，组件不会自动重新计算下拉可视区高度，滚动时会错误判定已经到达列表底部，通过ng-repeat的过滤逻辑直接移除非可视区的年份节点，回滚时没有触发节点回填逻辑就会出现选项消失的现象。
• 滚动偏移量计算偏差：组件内部维护的滚动位置变量默认是监听鼠标滚轮事件更新的，没有适配平板端的touchmove事件的偏移量计算规则，滑动时偏移量计算值超出实际列表总长度，就会让列表渲染逻辑认为当前没有需要展示的年份项，直接清空可视区内容。

快速验证方案：给年份下拉容器强制添加样式height: 240px; overflow-y: scroll; -webkit-overflow-scrolling: auto; transform: none; overscroll-behavior: contain;，关闭移动端默认触摸滚动优化、阻止滚动冒泡，若测试时问题消失即可确认是上述原因导致。

内容的提问来源于stack exchange，提问作者user19420008