Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| testInfo.annotations.push({ | ||
| type: 'issue', | ||
| description: 'https://github.com/ionic-team/ionic-framework/issues/30900', | ||
| description: 'https://github.com/ionic-team/ionic-framework/issues/31015', |
There was a problem hiding this comment.
Why was the issue changed?
There was a problem hiding this comment.
Old version of this test asserted on wrapperEl padding-bottom, which was the behavior #30949 added when fixing #30900. This PR moves that compensation into ion-content's scroll padding to fix #31015 (the regression #30949 caused), so the assertions now verify the #31015 fix rather than the original #30900 work. I don't think we can have two annotations at once for the same issue? Or can we? Not sure. We don't typically do that, so I just replaced this one.
| } | ||
|
|
||
| /** | ||
| * Sets --ion-content-safe-area-padding-bottom on the given ion-content |
There was a problem hiding this comment.
Correct me if I'm wrong but it seems that --ion-content-safe-area-padding-bottom is a a new variable to the project? If that's the case, can we comment that it's meant for internal usages and when to use it.
3 participants
Issue number: resolves #31015
What is the current behavior?
Fullscreen modals without an
ion-footersetheightandpadding-bottomon.modal-wrapperto reserve space for the bottom safe-area. Becauseion-content's background does not extend into that wrapper padding, a visible gap appears between the content and the bottom edge of the modal.Separately, modals that declare custom
--widthand--heighton phone viewports flash inherited safe-area values while animating in, then snap to0pxonce the post-animation position correction runs.What is the new behavior?
Bottom safe-area compensation now happens inside
ion-contentinstead of on the wrapper, so the modal background stays edge-to-edge.--ion-content-safe-area-padding-bottomCSS property is added to.inner-scroll'spadding-bottomcalc.modal.tsxsets that property onion-contentfor fullscreen modals without a footer, and clears it on resize and dismiss.heightorpadding-bottominline styles written to it.hasCustomModalDimensions()helper detects modals that override both--widthand--heightto non-fullscreen values. These are zeroed from the initial safe-area prediction so there is no flash before the post-animation correction.findContentAndFooter()andapplyFullscreenSafeAreaTo()helpers so the resize handler and initial apply share the same lookup..inner-scrollpadding including safe-area, and custom-dimension modals starting at zero.Does this introduce a breaking change?
Other information
--ion-content-safe-area-padding-bottomis an internal property. It is additive with the existing--padding-bottomconsumers can set, and it only takes effect whenmodal.tsxwrites it on fullscreen modals without a footer.Example pages:
Example iOS card modal safe-area:
Dev Build: