PrimeFaces 8.0 Dialog内p:calendar弹窗定位随父窗口滚动偏移问题

为对应的StackOverflow关联问题复现了最小可运行示例，该关联问题描述为「IE与Chrome浏览器中，滚动父页面时Dialog内的p:calendar弹窗会偏离对应输入框位置」。自身开发过程中也遇到了完全一致的问题，目前已定位到异常根因，但暂时没有找到可行的修复方案。
*注意：参考同类问题中针对selectOneMenu提出的appendTo属性适配方案，经测试完全不适用于Calendar组件。

复现规律 #

• 父窗口滚动至页面顶部时，Dialog内的Calendar弹窗定位完全正常
• 父窗口向下小幅滚动时，Dialog内的Calendar弹窗会比对应输入框的位置更靠下
• 弹窗的偏移量与父窗口的滚动幅度呈正相关
• 经排查，弹窗样式的top计算值是定位异常的核心诱因

问题效果截图 #

最小可复现代码 #

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:o="http://omnifaces.org/ui"
      xmlns:of="http://omnifaces.org/functions">
    <h:head>
        <title>Calendar</title>
    </h:head>
    <h:body>
        <h1>Calendar Popup Issue PF 8.0</h1>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <h:panelGrid id="gridId">
            <h:panelGrid id="panelId">
                <h:form id="laborForm">
                    <p:commandButton 
                        oncomplete="PF('dialogWv').show()" 
                        title="Click to open dialog" 
                        update="dialogId" 
                        value="Open dialog with popup time only calendar" />
                </h:form>
            </h:panelGrid>
        </h:panelGrid>
        <!-- 预留足够高度触发父页面滚动 -->
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <p:dialog 
            id="dialogId" 
            header="Test" 
            dynamic="true" 
            widgetVar="dialogWv" 
            modal="true" 
            showEffect="fade" 
            hideEffect="fade" 
            resizable="true" 
            width="400px" 
            height="100px">
            <h:form id="formId">
                <p:panelGrid style="margin-bottom: 5px; border: 2px; width: 100%;" id="pg1">
                    <p:row>
                        <p:column colspan="2">
                            <p:calendar  
                                value="#{cc.attrs.viewBean.backfitTime}" 
                                timeOnly="true" 
                                pattern="HH:mm" 
                                showMillisec="false" 
                                showSecond="false" 
                                required="true" 
                                requiredMessage="Time is required" 
                                rendered="true" />
                        </p:column>
                    </p:row>
                </p:panelGrid>
                <br />
            </h:form>
        </p:dialog>
    </h:body>
</html>

约束与临时方案尝试 #

目前暂时无法将项目升级至PrimeFaces 10，因为PF10会导致站点内大量原有界面样式出现破损。曾尝试在PF8环境下替换使用datePicker组件作为临时方案，但PF8版本的datePicker存在两处明显体验问题：

• 整体渲染效果不佳
• 时间调整过程中，鼠标指针会遮挡小时、分钟的显示数值，点击上下箭头调整时间的操作效率极低

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