iPad Pro Landscape rendering bug for dropdown menu in .navbar-fixed-top

[deadend5001]

I am struggling with the iPad Pro testing. The navbar (aka top menu) doesn't seem to want to cooperate and it seems related to only the iPad Pro...the iPad 2, 4 and Air 2 all work perfectly. I've also tried testing on an Kindle fire and that worked too. The screenshot attached is what happens to the menu when you tap it.

Any advise is much appreciated on how to fix this.

NOTE: this seems to be only related to navbar-fixed-top. The navbar-static-top seems to work OK.

Here's the jsbin link to the source that I've tested is not working with the iPad Pro on Safari or Chrome: https://jsbin.com/dufozatiwi/1/edit?html

[kkirsche]

Can you post your example on a site like JSBin for us to
Analyze / debug?

[deadend5001]

Just updated the top ticket with the info you asked for. I provided a watered down page without much of anything other than the top menu and a footer.

[cvrebert]

Reposting to trigger validator: https://jsbin.com/dufozatiwi/1/edit?html

[cvrebert]

(The integrity false positives are due to validator/validator#151)
Tweaked example: https://jsbin.com/vajuqasibi/edit?html

[cvrebert]

@deadend5001 Were you pinch-zoomed-in at all when you took that screenshot? What version of iOS are you running?

[deadend5001]

@cvrebert I'm running the latest iOS 9.2

[deadend5001]

@cvrebert I just tried https://jsbin.com/vajuqasibi/edit?html and it still has the same behavior

[deadend5001]

@cvrebert 100% not using pinch-zoomed. Just loaded the page and tapped the menu.

[cvrebert]

@deadend5001 Are you able to reproduce this in the iPad Pro Simulator in Xcode?

[deadend5001]

@cvrebert just tested on the simulator as you stated using the iPad pro as the device and yes it's the same behavior.

[cvrebert]

@deadend5001 I couldn't seem to repro in the simulator. Could you give step-by-step instructions to reproduce the problem? Given #14603, I'm prepared to believe there is such a similar bug, but unless I can repro it, I can't report it upstream to WebKit.

[deadend5001]

Yes #14603 looks to be the exact same as this. If you look at their animated gif or whatever the visual is its the same steps I am doing. I open the simulator, I open safari, I type in url, it comes up. I click right most menu, I click menu to left of the one I click and keep going left clicking menus and it causes the image I showed you.

[deadend5001]

Strange they are saying its fixed with pull request #14667 but I am using bootstrap 3.3.6 and it's definitely there...

[cvrebert]

Yes #14603 looks to be the exact same as this.

#14603 involved zooming; your bug doesn't.

[cvrebert]

I can't reproduce:

@twbs/team Anyone able to reproduce this on either the Simulator or a physical iPad Pro?

[deadend5001]

@cvrebert did you try landscape mode? It looks like you are using portrait.

[patrickhlauke]

confirming on simulator / ipad pro in landscape

[cvrebert]

Confirmed for me too after switching to Landscape.

[cvrebert]

Filed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=152637

[cvrebert]

Filed Apple Safari Radar: http://openradar.appspot.com/24030853

[cvrebert]

We've reported the bug upstream and listed it on our Wall of Browser Bugs. Given the nature of this bug, it's not feasible to work around it, so there's nothing more we can do here. The ball is in Apple's court now.

[deadend5001]

Thanks for the follow-up. Glad it's found but a little sad it's on apple's side because that means it could take a long time to get fixed...

[coliff]

FYI; This bug appears to be fixed as of iOS 12. Tested on iPad Pro 12.9" on Browserstack.

Can reproduce the issue on iOS 11.

Fixed in iOS 12: