Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-27822] Ti.UI.iPad.Popover including arrow in content view on iOS 13

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2020-04-16T01:39:56.000+0000
Affected Version/sRelease 8.3.0
Fix Version/sRelease 9.0.1
ComponentsiOS
Labelsn/a
ReporterJustin Tickner
AssigneeVijay Singh
Created2020-03-18T04:27:47.000+0000
Updated2020-06-11T07:39:48.000+0000

Description

As of iOS 13, Ti.UI.iPad.Popover's "arrow" is included as part of the content area. This was not the case in previous versions of iOS, and is causing content to be pushed outside the bounds of what is visible in the Popover on iOS 13 devices. It's probably an issue with safe area implementation in iOS 13. See !popover_ios13_issue.png|thumbnail! for the difference between how it is working on iOS 13 and iOS 12. Reproduction code:
var win = Ti.UI.createWindow({backgroundColor: 'white'});
var button = Ti.UI.createButton({title: 'Open Popover Up', top: 100});
var button2 = Ti.UI.createButton({title: 'Open Popover Left', top: 200});
button.addEventListener('click', function(e){
    popover.show({ view: button });
})
button2.addEventListener('click', function(e){
    popover2.show({ view: button2 });
})
win.add(button);
win.add(button2);
var contentWindow = Ti.UI.createWindow({ title: 'Window title' });
contentWindow.add(Ti.UI.createLabel({text: "Example text."}));
var popover = Ti.UI.iPad.createPopover({
	backgroundColor: 'black',
	arrowDirection: Titanium.UI.iPad.POPOVER_ARROW_DIRECTION_UP,
    contentView: Ti.UI.createNavigationWindow({
        width: 450,
        height: 300,
		window: contentWindow,
    })
});
var popover2 = Ti.UI.iPad.createPopover({
	backgroundColor: 'black',
	arrowDirection: Titanium.UI.iPad.POPOVER_ARROW_DIRECTION_LEFT,
    contentView: Ti.UI.createNavigationWindow({
        width: 450,
        height: 300,
		window: contentWindow,
    })
});
win.open();

Attachments

FileDateSize
iPad9.7_alignmentIssue.png2020-04-14T16:56:14.000+0000192449
popover_ios13_issue.png2020-03-18T04:26:32.000+0000319664

Comments

  1. Mark Henderson 2020-03-26

    I have this issue as well, it completely ruins the UI of my app unfortunately as popovers are used extensively and dynamically. My app is like a map app with pins. I cannot find a way around this, but it seems that the SDK is implementing the iOS 13 change wrong as everything is clearly shifted up/down/left/right depending on the arrow direction.
  2. Mark Henderson 2020-04-06

    Hi, just wondering if there is any update on this issue in terms of when a fix to this may appear in the CI builds so I can test it? This bug is preventing me from releasing my app as I make heavy use of Popovers for iPad. Thanks!
  3. Vijay Singh 2020-04-06

    [~mark.henderson@snagr.co.uk] I am working on this. I'll update progress here.
  4. Vijay Singh 2020-04-07

    PR (master) - https://github.com/appcelerator/titanium_mobile/pull/11598 PR (9_0_X) - https://github.com/appcelerator/titanium_mobile/pull/11599
  5. Mark Henderson 2020-04-08

    @Vijay Singh I have tested the PR manually in my 9.0.0SDK and it works perfectly! Many thanks for the fast response at this difficult time!
  6. Justin Tickner 2020-04-08

    @Vijay Singh ditto to Mark's sentiment —really appreciate the fast response on this! Have tested this in 8.3.0.SDK and it also works fine there
  7. Satyam Sekhri 2020-04-13

    FR Passed
  8. Satyam Sekhri 2020-04-14

    Noticed an issue with the fix. When testing on an iPad simulator in portrait mode the text is not centrally aligned in the case of popover left. The text alignment issue is more noticeable on smaller screen like ipad pro 9.7 inch simulator whereas on on larger screen sim like iPad pro 12.9 inch the issue is not noticeable at all. Check the attached screenshot for 9.7 inch iPad pro. !iPad9.7_alignmentIssue.png|thumbnail!
  9. Vijay Singh 2020-04-14

    Looking in this.
  10. Vijay Singh 2020-04-15

    PR (9_0_X) - https://github.com/appcelerator/titanium_mobile/pull/11633 PR (master) - https://github.com/appcelerator/titanium_mobile/pull/11632
  11. Satyam Sekhri 2020-04-15

    FR Passed. The iPad popover are shown correctly and the title text is centrally aligned.
  12. Satyam Sekhri 2020-04-16

    Verified on: Mac OS: 10.15.4 SDK: 9.0.1.v20200415143120, 9.1.0.v20200415140515 Appc CLI: 8.0.0 JDK: 11.0.4 Node: 10.17.0 Studio: 6.0.0.202003181504 Xcode: 11.4 iOS simulator: iPad Air3(v13.4, 12.2), iPad Pro 9.7-inch(v13.4, 12.2), iPad Pro 11-inch(v13.4, 12.2), iPad Pro 12.9-inch(v13.4, 12.2)

JSON Source