iPhone X - 固定位置元素有额外的＆＃34;填充＆＃34;到达底部时

Question

在我滚动页面到达底部之前，元素正确呈现。

当到达页面底部时，元素仍然正确显示（绿色块），同时有一个＆＃34;填充＆＃34;低于＆＃34;实际元素＆＃34; （红色块），鼠标/触摸事件将在＆＃34;实际元素＆＃34;这是出乎意料的。

我将视口设置为：

<meta name="viewport" content="width=321,user-scalable=no,viewport-fit=cover"/>

问题似乎是由width=321设置引起的。如果我删除此部分或设置width=device-width，则没有问题。

在iPhone X（或模拟器）中查看此演示

https://codepen.io/iplus26/pen/GQJRzO