fix(ui): 根治真机弹窗 fixed 降级(移出 .container + pageIn 去 transform)
根因:.page-enter 的 pageIn 动画含 transform,即使 to: transform:none, 真机 fill-mode 没真正消除 transform,.container 仍是 fixed 的包含块。 记录页内容超一屏时 mask 降级相对 .container(高>>视口),flex 居中把 弹窗放到 .container 中心(视口外),真机看不到(模拟器宽松所以正常)。 - records: 日历详情弹窗移出 .container.page-enter,fixed 相对视口; 加 style themeStyle 拿暗黑变量 - app.wxss: pageIn keyframes 去掉 transform 只留 opacity 淡入,根治所有 页面(settings 计划编辑器/timer 完成弹窗)的 fixed 降级 - calendar-heatmap: onDayTap 的 find 用 Number(day) 修真机 dataset 字符串化导致 === 失败;移除诊断日志 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -129,11 +129,12 @@ image {
|
||||
}
|
||||
|
||||
@keyframes pageIn {
|
||||
from { opacity: 0; transform: translateY(20rpx); }
|
||||
/* `none` (not translateY(0)) so the finished animation leaves NO transform
|
||||
on .container - any non-none transform creates a containing block that
|
||||
demotes descendant position:fixed to relative-to-container, breaking
|
||||
full-screen modals (day-detail / plan-editor / completion) once the
|
||||
page scrolls past one viewport height. */
|
||||
to { opacity: 1; transform: none; }
|
||||
/* Opacity-only: any transform (even translateY(0) held by animation
|
||||
fill-mode) makes .container a containing block that demotes descendant
|
||||
position:fixed to relative-to-container, breaking full-screen modals on
|
||||
real devices once the page scrolls past one viewport. The prior
|
||||
`to: transform: none` did NOT hold on real devices, so drop transform
|
||||
from the keyframes entirely. Pages still get a fade-in. */
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@@ -79,13 +79,16 @@ Component({
|
||||
|
||||
onDayTap(e) {
|
||||
const day = e.currentTarget.dataset.day
|
||||
if (!day) return
|
||||
const cell = this.data.weeks.flat().find(c => c && c.day === day)
|
||||
if (!day && day !== 0) return
|
||||
// dataset values can arrive as strings on real devices, which breaks
|
||||
// the strict === against c.day (number). Normalize so the lookup
|
||||
// works on both simulator and device.
|
||||
const cell = this.data.weeks.flat().find(c => c && c.day === Number(day))
|
||||
if (!cell || cell.duration <= 0) return
|
||||
this.triggerEvent('daytap', {
|
||||
year: this.properties.year,
|
||||
month: this.properties.month,
|
||||
day,
|
||||
day: cell.day,
|
||||
duration: cell.duration
|
||||
})
|
||||
}
|
||||
|
||||
@@ -113,11 +113,12 @@
|
||||
</view>
|
||||
<!-- /hidden wrapper -->
|
||||
|
||||
<!-- 日期详情弹窗:普通 view 实现,不用 ui-modal。
|
||||
自定义组件根元素的 position: fixed 会被小程序运行时吞掉,叠加
|
||||
.page-enter 的 transform 会让 fixed 降级相对 .container,导致弹窗
|
||||
落到容器末尾而非视口居中。普通 view 的 fixed 100% 生效。 -->
|
||||
<view wx:if="{{showDayDetail}}" class="day-detail-mask" catchtouchmove="onNoop">
|
||||
</view>
|
||||
<!-- 日期详情弹窗:放在 .container 外。 .page-enter 的 transform 让 .container
|
||||
成为 fixed 的包含块,mask 降级相对 .container(高>>视口),body 居中到
|
||||
.container 中心(视口外),真机看不到。移到 .container 外,fixed 相对视口;
|
||||
style 注入 themeStyle 拿暗黑变量。 -->
|
||||
<view wx:if="{{showDayDetail}}" class="day-detail-mask" style="{{themeStyle}}" catchtouchmove="onNoop">
|
||||
<view class="day-detail-mask__bg" bindtap="onCloseDayDetail"></view>
|
||||
<view class="day-detail-body" catchtap="onNoop">
|
||||
<view class="detail-date-row">
|
||||
@@ -146,4 +147,3 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user