请问移动 h5 overflow-y: scroll +下边距为什么会导致内容高度偏移（失真？）如何解决？

Question

父级容器 48px 高度，子容器 44px 高度 + 4px 下边距

一、父容器设置 overflow-y: auto，高度应该是刚刚好容纳第一个子容器的，但是却展示了第二个子容器大约 1px 的内容

.father {
    height: 48px;
    overflow-y: auto;
}

.child {
    color: #fff;
    font-size: 14px;
    margin-bottom: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.4);
}

二、父容器去掉滚动能够解决问题

.father {
    height: 48px;
}

问：在保留 overflow-y: scroll 的前提下，能否解决掉 1px 的问题呢？谢谢

回答一楼的问题：
父容器确实是 48px，我在 codepen 和重写一个 html 都没有问题

然后去调整下边距发现奇数的时候会消失，偶数的时候会出现。

非 h5 环境下没有这个问题

Answer 1

我在codepen里面没能复现OP你的情况，你尝试一下在codepen是否能复现看看？
然后贴出来的样式代码中 .child 没有设置 line-height 可能和行高有关系？
或者可以尝试查看一下 .father 容器的高度是否是设置的 height:48px;

Answer 2

找不到原因了，感觉和移动端的解析有关。 只能先通过给父容器加一个底部遮罩解决了。

-webkit-mask: linear-gradient(transparent, #000 10% 99%, transparent);