[notification] Wrong positioning on iOS when zoom is changed

[knoobie]

Description

iOS 15 bottom-end notification is shown on the whole body, because of the narrow spacing by default. (Good!)

iOS 16 beta2 on the other hand shows the notification only in the bottom right corner.. which in turn is a huge problem if the notification has more text (I can't share a real application public with it, but it looks horrible)

I'm not sure if you are already wanna do something about it, or wait until iOS 16 is final. I wanted to mention it because I had to test different iOS versions with our application, because of a problem in iOS 15 that is fixed in iOS 16..

Expected outcome

The notification is shown like in iOS 15

Minimal reproducible example

https://vaadin.com/docs/latest/example?embed=notification-position-wc.js&import=component/notification/notification-position.ts

Click bottom-end and expect a full-sized notification like in iOS 15

Steps to reproduce

See example

Environment

Vaadin version(s): 23.1
OS: iPhone / iOS 15.5 (ok) / iOS 16 public beta 2 (failure)

Browsers

Safari on iOS

[web-padawan]

Thanks for the issue. To me it seems like the following style no longer applies:

web-components/packages/notification/src/vaadin-notification.js

Line 62 in d24f64f

align-items: stretch;

[web-padawan]

@knoobie Could you please let me know which device resolution do you have on iOS 16?
I wonder if that can be bigger than the hardcoded 420px breakpoint that we have here:

web-components/packages/notification/src/vaadin-notification.js

Line 59 in d24f64f

@media (max-width: 420px) {

According to this list, at least iPhone 13 Pro Max has 428px screen width, which is bigger.

[knoobie]

The problem is in front of the device :) my colleague with iOS 16 had page zoom 85% configured on iOS to get a better viewing experience on safari.. making totally weird things with the resolution..

See:

https://www.rapidtables.com/web/tools/window-size.html

The same with an iPhone 12 pro 100% (no zoom) shows 390px for both inner and outer.. and the problem is gone.. and not related to the iOS version at all.. could reproduce the same with iOS 15

[web-padawan]

my colleague with iOS 16 had page zoom 85% configured

Oh, thanks. Renamed the issue accordingly.

[sissbruecker]

Just to reference what the actual problem is, as it was not clear during grooming. The bottom-end notification uses a certain percentage of the screen width by default, which causes it to grow in height for long-form content if the screen has a small size that's still larger than the configured mobile breakpoint:

[knoobie]

Thanks Sascha!

[jouni]

Not sure how we’ll fix this, but the original/current implementation has never really been ideal for this exact reason, that there’s an arbitrary viewport width after which the width is split into three columns.

I think all top/middle/bottom positions should be in the same “stack” (single column), and only the alignment would be different depending on the position (start/center/end). The best practice is in any case be that you only use max 2 positions in your app.

[knoobie]

As workaround, I'm probably going to increase the 420px to 600px in my CSS - in 2022 this sounds like the better "low resolution" for all kind of small devices, but that's probably not a good way for a framework to fix the underlying problem with all the different media queries and problems arising from it.

[knoobie]

Edit: nvm - closing as working as intended, I guess (in 2025 😅)