select: dropdown position is wrong in iOS Safari

[pavelsl]

Bug:

CodePen and steps to reproduce the issue:

CodePen Demo: usage with flexbox grid

CodePen Demo: usage with floating grid (tried to see if issue reproducible if we are not using flexbox)

CodePen Demo: almost no custom css (no grid at all)

Detailed Reproduction Steps:

1. Clear device browser cache and data
2. Open jsbin link
3. Scroll a page down
4. Open dropdown

What is the expected behavior?

md-select dropdown in place

What is the current behavior?

md-select dropdown is not in place

What is the use-case or motivation for changing an existing behavior?

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.6.8
• AngularJS Material: 1.10.0
• OS: iOs 11.x
• Browsers: Safari

Is there anything else we should know? Stack Traces, Screenshots, etc.

Some times issue is not reproducible but after clearing cache it present again. It's really not too hard to reproduce.

[pavelsl]

@Splaktar Might this will be interesting for you.

[pavelsl]

It would be great to have any method to trigger recalculation of md-select dropdown position.

[codymikol]

This seems to work fine for me on iOS 11.x

[Splaktar]

@pavelsl Can you please provide the device model? iPhone 5, 8, X, etc.

[pavelsl]

@Splaktar
I believe any not the newest device (which is slower than iPad Pro @codymikol's ) as the issue.

I have two iPad's mini.
Exact iOs version of iPad mini first has v10.1.1 & iPad mini second has v11.3. And the issue is reproducible on both of them. Screenshots are taken on v10.1.1

Can check on old iPad 2 as well which has iOs v9.x

---

I was able to fix this by additional position check which happen with 1-2s delay. It seems that md-select dropdown position calculation logic doesn't work well on these. Not sure because of logic issue, or device mobile safari glitches.

---

PS:
@pavelsl Can you please provide the device model? iPhone 5, 8, X, etc. Have you seen screenshots?

[Splaktar]

I tested on an iPad Air simulator with iOS 11.4 and I was not able to reproduce these issues. Unfortunately I don't have any iOS devices to test against.

I don't think that testing on an iOS 9 device is worthwhile since we don't suppport iOS 9 at this time. You can find some details about browser support here.

If you can test a fix locally and verify that it solves the issue, I would be happy to review the PR.

[pavelsl]

@Splaktar (comment could be ignored, nothing important here)
I meant i have my own workaround which doesn't fix positioning logic issue (md-select issue or iOS issue) that's not something to be merged. I have wrote standalone directive that checks whether dropdown was placed too far in iOS and fixes it's position if it is.

Have you ever seen bugs which doesn't exist in simulator but exist in real device? I used to fix something i see in simulator when it didn't exist in real device and vice versa, now i only use real devices for testing (real PC for IE tests and real iOS/Android devices, only use dev tools emulation too check breakpoints appearance).

I understand that it's quite a problem to get all devices with all the versions. But the thing is that something what exist in real device can absent in simulators (whatever iOS or virtual machine with IE).

Let's wait for anyone else creating duplicate or find this and shout that he has the same.

[Splaktar]

Yes, I have seen issues that appear in simulators but not real devices and vice versa. That's why I was asking for someone with a real device to come up with a fix for this and verify it on their device.

If someone in the US wanted to send me a device with this issue, I would be happy to work on the fix and then send the device back. However, I won't be able to acquire all of the devices that this project supports in order to fix specific issues.

[SergioFernandez-Mirada]

Reproduced the same bug in iPhone 6 with iOS 11.3 (Safari browser), iPhone X with iOS 12.0.1 (Safari browser) and iPad Pro with 11.4.1 (safari browser). It only happens using Safari.

It seems like the problem appears when the screen has been scrolled down. When clicking the md-Select, the options dropdown emerges up the screen, non in the right position.

[pavelsl]

I have fixed it using 1s timeout adjusting position with separate piece of JS which has no access to material context. Just attach your own handler and do fixing of all dropdowns yourself (
Have no idea whether it was fixed or not in newer version neither intention to check :)

[Splaktar]

I have an iPad now, so I will try to reproduce this on a real device.

Related issue: #11345

[SergioFernandez-Mirada]

Thank you @Splaktar , waiting for your answer.

[xr0master]

+1 have issue in ipad too.
However I have the options on top of viewport all time. The position is right when the page is not scrolled, otherwise it is wrong
Browser: Chrome (mobile) and Firefox (mobile),
"angular-material": "1.1.12",
"angular": "1.7.6",

[SergioFernandez-Mirada]

Yes, I said it was only reproduced on Safari because I did not use Chrome or Mozilla on iOS devices. But the bug appears on every browser. Any solution @Splaktar ??

[xr0master]

BTW: Looks like i got it. The issue I have on ipad and ipad pro too.
If use timeout, it will fix the position. So issue is that the calculation of position started too fast, and in slow devices (aka tablet) it creates this issue. IMO

Example for controller. For mdSelect you can use the click event and then run the timeout.

this.$onInit = function $onInit() {
    $timeout(function() {
        $($window).trigger('resize');
    }, 5000);
};

[SergioFernandez-Mirada]

I will try your solution. Thanks @xr0master

[SergioFernandez-Mirada]

It did not work, the bug remains in the md-select.

[lechuckcaptain]

I have fixed it using 1s timeout adjusting position with separate piece of JS which has no access to material context. Just attach your own handler and do fixing of all dropdowns yourself (
Have no idea whether it was fixed or not in newer version neither intention to check :)

@pavelsl, would you be so kind to post an example of the workaround? (An updated codepen with the full workaround in place would be perfect)

[Splaktar]

OK, I can reproduce this on iPad Safari the second md-select that is opened in each demo had the panel detached from the md-select.

I updated the third example to AngularJS 1.7.8 and AngularJS Material 1.1.19 and the issue is still reproducible.

[Splaktar]

I put together a demo of this in the AngularJS Material docs and deployed it for testing and I'm not able to reproduce it there. I checked for CodePen demos in this thread, but it seems like all of the reproductions are in JSBin. Is this possibly just an issue with JSBin?

[Splaktar]

If anyone can provide a reproduction that will work in CodePen and on our docs site, I'll take another look at this after PR #11739 gets merged.

[xaun]

@Splaktar Please fix this in 1.1.21 🙏 Causing issues for me on production (angular 1.6.1 md 1.1.20) .. Using @xr0master's fix which SEEMS to be working for now thankfully...

[Splaktar]

@xaun I'm currently looking for an updated CodePen or GitHub reproduction as I've had problems reproducing this issue (thus I can't debug it).

This is also blocked by a couple major select PRs that need to get in first

• fix(select): overhaul screen reader support #11761
• fix(select): optgroups are not visible to screen readers #11771

[Splaktar]

This is no longer blocked by other md-select PRs.

That said, the requested demo in CodePen, StackBlitz, or GitHub has not been provided. So this is still looking like a JSBin issue until we have some evidence otherwise.

I'll leave this open for feedback for another week or so. If an updated reproduction isn't available at that time, I'll close this.