Mozilla Android 地址栏与底部的粘滞按钮冲突
Mozilla Android AddressBar Conflict with Sticky Button on Bottom
我已经搜索了很多，但没有找到任何有效的解决方案，所以在这里。
我在内容之后创建了一个按钮，并应用 css 使其粘在页面底部...
<button class="ocs-trigger ocs-toggle ocs-toggle-posts-toc-mobile">Περιεχόμενα</button>
button.ocs-toggle-posts-toc-mobile {
display: block;
bottom: 10px;
position: sticky;
position: -webkit-sticky;
margin: auto;
border-radius: 4px;
box-shadow: 0 0 3px 0 #d5d5d5;
background: #232f3e;
font-weight: 500;
font-size: 18px;
padding: 7px 12px;
}
除了 mozilla android，它在我测试过的任何浏览器中都适用。
如果 mozilla 底部地址栏可见，则该按钮可以正常工作。
https://imgur.com/a/EJosALR
但是如果 mozilla 的底部地址栏被隐藏，则该按钮不可点击。
https://imgur.com/a/A2jwzIl
当 mozilla 的底部地址栏被隐藏时，我认为视口高度发生了变化，也许是因为按钮现在位于可见地址栏所在的位置，也许它在 mozilla 的“活动”视口之外...这绝对是一个错误我相信因为它不会在其他浏览器中发生！
不过你能看看我有没有遗漏什么吗？
我真的很感激，因为我几乎到处都看过了，我相信...
使用 Firefox 远程调试的调查
TL;DR：很可能是 Firefox 移动应用程序中的错误
所以我已经将我的 phone 连接到计算机并启动了您提供的 remote debugging session on the page。
检查按钮元素时 <button class="ocs-trigger ocs-toggle ocs-toggle-posts-toc-mobile">Περιεχόμενα</button> 我们可以看到在视口中突出显示的确切框位置：screenshot
现在它变得有趣了。显然，一旦底部栏消失，元素的 DOM 框就会移动。或者更确切地说：初始视口（当底栏可见时）不会改变，因为框仍然位于相同的位置。
所以你实际上仍然可以 click/touch 按钮，但在它上面的区域。
您可以在下面的屏幕录像中看到此行为：
Cookie 横幅按预期重新定位
有趣的是，cookie 横幅的行为（隐藏在屏幕录像中，因为已经确认）看起来符合预期。那么按钮有什么区别呢？
解决方法和可行的解决方案：将按钮移到 #ocs-site 元素上方
显然，经过大量实验后，我意识到按钮（不正确的行为）和 cookie 横幅（正确的行为）之间的唯一区别是，cookie 横幅位于 DOM，而按钮嵌套在树的深处。
最后，我找到了一个使按钮按预期运行的可行解决方案。在这里您可以看到正确的滚动行为：
我想到的解决方案是将 .ocs-trigger 按钮移到 #ocs-site div 元素上方。这修复了底部栏 disappears/appears.
时不正确的滚动行为
此外，在 .ocs-trigger 元素上应用一些样式以进行正确定位。
position: fixed;
bottom: 10px;
z-index: 11;
left: 0;
right: 0;
你可以在截图中看到最后的 DOM:
请注意，您可能需要应用额外的样式更改。此解决方案的主要方面是摆脱不正确的滚动行为。
Follow-up：Firefox 错误？在我看来。
我现在仍然觉得这是移动版 Firefox 实现中的一个错误。我的猜测是，对于嵌套元素，视口计算在某种程度上是不正确的。
为了引起对该主题的关注，我建议您在 https://github.com/mozilla-mobile/fenix/issues 与 Mozilla 团队分享这些调查和文档。让我知道是否可以帮助您。
我已经搜索了很多，但没有找到任何有效的解决方案，所以在这里。
我在内容之后创建了一个按钮，并应用 css 使其粘在页面底部...
<button class="ocs-trigger ocs-toggle ocs-toggle-posts-toc-mobile">Περιεχόμενα</button>
button.ocs-toggle-posts-toc-mobile {
display: block;
bottom: 10px;
position: sticky;
position: -webkit-sticky;
margin: auto;
border-radius: 4px;
box-shadow: 0 0 3px 0 #d5d5d5;
background: #232f3e;
font-weight: 500;
font-size: 18px;
padding: 7px 12px;
}
除了 mozilla android，它在我测试过的任何浏览器中都适用。 如果 mozilla 底部地址栏可见，则该按钮可以正常工作。 https://imgur.com/a/EJosALR
但是如果 mozilla 的底部地址栏被隐藏，则该按钮不可点击。 https://imgur.com/a/A2jwzIl
当 mozilla 的底部地址栏被隐藏时，我认为视口高度发生了变化，也许是因为按钮现在位于可见地址栏所在的位置，也许它在 mozilla 的“活动”视口之外...这绝对是一个错误我相信因为它不会在其他浏览器中发生！
不过你能看看我有没有遗漏什么吗？
我真的很感激，因为我几乎到处都看过了，我相信...
使用 Firefox 远程调试的调查
TL;DR：很可能是 Firefox 移动应用程序中的错误
所以我已经将我的 phone 连接到计算机并启动了您提供的 remote debugging session on the page。
检查按钮元素时 <button class="ocs-trigger ocs-toggle ocs-toggle-posts-toc-mobile">Περιεχόμενα</button> 我们可以看到在视口中突出显示的确切框位置：screenshot
现在它变得有趣了。显然，一旦底部栏消失，元素的 DOM 框就会移动。或者更确切地说：初始视口（当底栏可见时）不会改变，因为框仍然位于相同的位置。
所以你实际上仍然可以 click/touch 按钮，但在它上面的区域。
您可以在下面的屏幕录像中看到此行为：
Cookie 横幅按预期重新定位
有趣的是，cookie 横幅的行为（隐藏在屏幕录像中，因为已经确认）看起来符合预期。那么按钮有什么区别呢？
解决方法和可行的解决方案：将按钮移到 #ocs-site 元素上方
显然，经过大量实验后，我意识到按钮（不正确的行为）和 cookie 横幅（正确的行为）之间的唯一区别是，cookie 横幅位于 DOM，而按钮嵌套在树的深处。
最后，我找到了一个使按钮按预期运行的可行解决方案。在这里您可以看到正确的滚动行为：
我想到的解决方案是将 .ocs-trigger 按钮移到 #ocs-site div 元素上方。这修复了底部栏 disappears/appears.
此外，在 .ocs-trigger 元素上应用一些样式以进行正确定位。
position: fixed;
bottom: 10px;
z-index: 11;
left: 0;
right: 0;
你可以在截图中看到最后的 DOM:
请注意，您可能需要应用额外的样式更改。此解决方案的主要方面是摆脱不正确的滚动行为。
Follow-up：Firefox 错误？在我看来。
我现在仍然觉得这是移动版 Firefox 实现中的一个错误。我的猜测是，对于嵌套元素，视口计算在某种程度上是不正确的。
为了引起对该主题的关注，我建议您在 https://github.com/mozilla-mobile/fenix/issues 与 Mozilla 团队分享这些调查和文档。让我知道是否可以帮助您。