问题描述：
- 问题现象：用户反馈视频被遮挡，无法播放。
- 影响范围：WidgetRender 组件及其子组件。
- 优先级和严重性：问题紧急，被用户投诉，严重影响业务。
环境信息：
- 操作系统：Windows 。
- 浏览器：Chrome 平板尺寸下。
复现步骤：
- 在微信开发者工具访问 pages/learning/LearningPage ，复制 WebView 。
- 运行学习端项目，浏览器调试。
- 切换至平板尺寸，观察到互动式课件中视频组件被图片组件遮挡，无法点击播放。
日志和错误信息：
- 浏览器 DevTools Elements：期望组件样式为 rem 单位，观察到 px 单位。
- 网络请求记录：首次进入互动式课件，观察到接口 /n/api/v2/learning/{productId}/card/content/{chapterCardId}/{sectionCardId}/{lessonCardId} 返回内容皆为 rem 单位。切换卡片后，接口 /n/api/v1/ic/user/content 保存内容存在 px 单位。
追溯与分析：
- 起初无论在学习端或编辑器皆难以复现。在编辑器项目未检索到关键涉及 px 单位的代码且知晓学习端存在保存课件内容的接口调用。平板尺寸下，切换卡片能稳定复现。
- 由于初次访问课件，接口总返回 rem 单位。保存课件内容时，存在 px 单位。初步猜测存在方法修改了内容样式的单位。
- 从组件 IcCard 追溯课件内容的流向，逐步打印，观察是否存在 px 单位。
- 课程内容为响应式对象，故打印时除中止方法体后续代码外，还需阻止对子组件的传递，以避免子组件内部对内容所作修改造成的干扰。
- 追溯至组件 H5Container 时，由于初步观察移动端尺寸下课件组件样式符合预期，而平板尺寸下存在问题，且在方法 resetFontSizeAndMaxWidth 中打印内容发生变化，猜测是比例转换引发的。横向小屏下会转换两次（默认大屏转换一次和小屏下转换一次），观察到第二次转换时样式单位发生变化。联想到 DOM 操作会引发浏览器重排和重绘，于是将第二次操作放在 $nextTick 中执行。此时页面符合预期，似乎问题得到解决。但对比前后内容，发现仅有两个宽度较大（分别为 20.48rem 和 18.68rem）的图片组件样式尺寸发生变化。似乎存在某个“宽度阈值”，大于该值时，图片组件的样式尺寸会由 rem 单位转为 px 单位。
- 最终追溯至组件 WidgetRender 的方法 getWidgetStyle 源自 8 月 2 日的一次提交。当组件宽度和根元素字体尺寸的积大于常量最大宽度 950 时，由 CardStyleManagement 的方法 calcCardBoxStyle 计算得到新的样式。且方法 getWidgetStyle 的形参和返回值是同个响应式对象，这解释了为何获取和保存内容样式尺寸变化的问题。
解决方案：
- 优化方法 resetFontSizeAndMaxWidth ，减少非必要的 DOM 操作。
- 回滚方法 getWidgetStyle ，手动修复互动式课件编辑器中视频组件的样式。
验证与回归测试：
- 本地环境中验证通过。
总结与思考：
- 迭代时应遵循开闭原则，避免影响原有功能。
- 保持单向数据流，使数据更便于追踪。