Blazor项目中BlazorWheelZoom在Blazorise Modal内无法限制图片越界问题

正在开发一个Blazor项目，使用了BlazorWheelZoom组件。
首页代码如下：

@page "/"
@page "/print"
@using Blazorise
@using LabelPrint.Shared
@using Linak.LabelPrint.Client.Shared.Components

<h3>Print</h3>

<div class="container-lg">
    <div class="row">
        <div class="d-flex justify-content-center">
            <div style="border: thin solid green; width: 510px; height: 510px; padding: 5px;">
                <WheelZoom Image="/Img/rotate0.png" width="500" height="500" />
        </div>
    </div>
.... and so on

上述代码在主页面运行效果符合预期：图片无法被向左拖动超出边界，放大后仅能拖动对应超出可视区域的像素距离就会停止，和组件官方demo表现一致。
但将完全相同的代码放到Blazorise的Modal弹窗组件中后，图片可以被一直向左拖动移出边界。使用的HTML和CSS和主页面完全一致，猜测是父容器配置问题，但多次调试修改都没有解决，需要实现弹窗内的图片也无法被拖动超出边界的效果。
弹窗内的代码如下：

<Modal @ref="LabelPreview">
<ModalContent Centered="true" Size="ModalSize.Large">
    <ModalHeader>
        <ModalTitle>Show</ModalTitle>
        <CloseButton />
    </ModalHeader>
    <nav class="navbar navbar-light bg-light">
        <Button @onclick="() => RotateImage(true)">
            <i class="fas fa-redo"></i>
        </Button>
        <Button @onclick="() => RotateImage(false)">
            <i class="fas fa-undo"></i>
        </Button>
    </nav>
    <ModalBody>
                <div class="d-flex justify-content-center">
                    <div class="@($"{rotationClass} frame")">
                        <WheelZoom Image="@(rotate0)" width="500" height="500" />
                    </div>
                </div>
    </ModalBody>
    <ModalFooter>
        <Button Color="Color.Secondary" Clicked="@DownloadImage">Download</Button>
        <Button Color="Color.Primary" Clicked="@HidePreviewModal">OK</Button>
    </ModalFooter>
</ModalContent>

该问题由两个核心原因导致：

1. Blazorise设置Centered="true"的Modal会通过transform: translate(-50%, -50%)实现居中，该属性会改变元素offsetParent的计算逻辑，导致BlazorWheelZoom内部计算拖拽边界时取值错误。
2. Modal默认处于隐藏状态时，BlazorWheelZoom初始化时无法拿到正确的父容器尺寸，边界计算失效。
   可按照以下步骤修复：

• 禁用Modal的Centered属性，改为手动设置居中样式，避免transform属性干扰
• 为WheelZoom的父容器添加固定宽高、相对定位和溢出隐藏规则
• 新增渲染判断，仅在Modal完全显示后再渲染WheelZoom组件
  修改后的示例代码如下：

1. 调整Modal参数 #

<!-- 移除Centered="true"参数 -->
<Modal @ref="LabelPreview">
<ModalContent Size="ModalSize.Large" Class="custom-modal-center">

2. 新增自定义CSS #

/* 手动实现Modal居中，避免使用transform */
.custom-modal-center {
    margin: auto;
    top: 50%;
    transform: translateY(-50%) !important;
}
/* 给WheelZoom父容器添加固定尺寸和定位规则 */
.frame {
    position: relative;
    width: 510px;
    height: 510px;
    overflow: hidden;
    border: thin solid green;
    padding: 5px;
}

3. 延迟渲染WheelZoom组件 #

新增控制Modal显示状态的字段isPreviewOpen，在打开Modal的方法中赋值为true，关闭时赋值为false，修改ModalBody内的渲染逻辑：

<ModalBody>
    <div class="d-flex justify-content-center">
        <div class="@($"{rotationClass} frame")">
            @if(isPreviewOpen)
            {
                <WheelZoom Image="@(rotate0)" width="500" height="500" />
            }
        </div>
    </div>
</ModalBody>

完成上述修改后，弹窗内的WheelZoom组件即可和主页面保持一致的边界限制效果。

内容的提问来源于stack exchange，提问作者Lukas Méndez Duus