{ "id": "176308", "key": "AC-6724", "fields": { "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false }, "project": { "id": "12217", "key": "AC", "name": "Appcelerator - INBOX", "projectCategory": { "id": "10000", "description": "", "name": "Customer Service" } }, "resolution": null, "resolutiondate": null, "created": "2021-10-13T08:55:37.000+0000", "labels": [ "ios-15" ], "versions": [], "issuelinks": [], "assignee": { "name": "amukherjee", "key": "amukherjee", "displayName": "Abir Mukherjee", "active": true, "timeZone": "America/Los_Angeles" }, "updated": "2021-11-29T14:10:49.000+0000", "status": { "description": "The issue is open and ready for the assignee to start work on it.", "name": "Open", "id": "1", "statusCategory": { "id": 2, "key": "new", "colorName": "blue-gray", "name": "To Do" } }, "components": [], "description": "After updating to iOS 15 (without updating SDK), most of our headerViews in ListViews have started to have a \"glitch\", -when setting data- when creating listview. Have a look at attached video from our app as an example of this behaviour. ", "attachment": [ { "id": "68004", "filename": "glitch.mov", "author": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-10-13T08:54:30.000+0000", "size": 3207527, "mimeType": "video/quicktime" }, { "id": "68018", "filename": "listviewWithReplace.mov", "author": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-10-19T07:13:59.000+0000", "size": 1614763, "mimeType": "video/quicktime" }, { "id": "68014", "filename": "RPReplay_Final1634561670.MP4", "author": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-10-18T13:01:07.000+0000", "size": 1550464, "mimeType": "video/mp4" }, { "id": "68019", "filename": "Screenshot_listviewWithReplace.png", "author": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-10-19T07:14:05.000+0000", "size": 255318, "mimeType": "image/png" } ], "flagged": false, "summary": "iOS 15: Glitch in headerview when creating ListView", "creator": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "subtasks": [], "reporter": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "environment": "Ti SDK 9.2.2.GA, 10.1.0.GA", "comment": { "comments": [ { "id": "459093", "author": { "name": "eharris", "key": "eharris", "displayName": "Ewan Harris", "active": true, "timeZone": "Europe/Dublin" }, "body": "[~jonasfunk] There was a behaviour change in iOS 15 around the padding of headers in ListViews that was accounted for in 10.1.0.GA (TIMOB-28524), your description states {{without updating SDK}} but the environment states 10.1.0.GA? Could you please confirm what SDK you are using and if possible provide a better example", "updateAuthor": { "name": "eharris", "key": "eharris", "displayName": "Ewan Harris", "active": true, "timeZone": "Europe/Dublin" }, "created": "2021-10-14T13:24:26.000+0000", "updated": "2021-10-14T13:24:26.000+0000" }, { "id": "459094", "author": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Thanks for looking into this issue. To clarify: After updating to iOS 15, we began seeing this issue on our app in production build with 9.2.2.GA. We updated to 10.1.0.GA, to see if that issue was fixed. It wasn't. ", "updateAuthor": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-10-14T13:40:24.000+0000", "updated": "2021-10-14T13:40:24.000+0000" }, { "id": "459095", "author": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "body": "By better example do you mean, you are not able to see the issue in the video, or do mean an example with code?", "updateAuthor": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-10-14T13:52:06.000+0000", "updated": "2021-10-14T13:52:06.000+0000" }, { "id": "459096", "author": { "name": "eharris", "key": "eharris", "displayName": "Ewan Harris", "active": true, "timeZone": "Europe/Dublin" }, "body": "Ideally a code sample would be best", "updateAuthor": { "name": "eharris", "key": "eharris", "displayName": "Ewan Harris", "active": true, "timeZone": "Europe/Dublin" }, "created": "2021-10-14T14:05:24.000+0000", "updated": "2021-10-14T14:05:24.000+0000" }, { "id": "459107", "author": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "body": "\r\n{noformat}\r\nconst win = Ti.UI.createWindow();\r\n\r\nconst addListviewButton = Ti.UI.createButton({\r\n title: 'Create listview',\r\n zIndex:1000,\r\n bottom:40,\r\n height:50,\r\n width:200,\r\n style:Ti.UI.iOS.SystemButtonStyle.BUTTON_STYLE_OPTION_NEUTRAL\r\n});\r\n\r\naddListviewButton.addEventListener('click',function(){\r\n win.add(createListView());\r\n});\r\n\r\nwin.add(addListviewButton);\r\n\r\n\r\nwin.open();\r\nwin.add(createListView());\r\n\r\n\r\nfunction createListView(){\r\n\r\n //Remove listview if already added\r\n if(win.children.length == 2)\r\n win.remove(win.children[1]);\r\n\r\n const headerView = Ti.UI.createView({\r\n height:300,\r\n backgroundColor:'blue'\r\n });\r\n \r\n const listView = Ti.UI.createListView({\r\n headerView: headerView\r\n });\r\n \r\n\r\n return listView;\r\n}\r\n{noformat}\r\n", "updateAuthor": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-10-18T12:59:47.000+0000", "updated": "2021-10-18T12:59:47.000+0000" }, { "id": "459108", "author": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "body": "I've attached another screen recording of running the above code sample on an iPhone 13 Pro / iOS 15, and clicking the 'Create listview' button 3 times. You can especially see the glitch described, when opening the window. It's like the header is moving down to the middle of the screen.", "updateAuthor": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-10-18T13:05:50.000+0000", "updated": "2021-10-18T13:05:50.000+0000" }, { "id": "459109", "author": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "body": "I should emphasise that this is only observable when running on device. Simulator is fine. ", "updateAuthor": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-10-18T13:17:22.000+0000", "updated": "2021-10-18T13:17:22.000+0000" }, { "id": "459110", "author": { "name": "eharris", "key": "eharris", "displayName": "Ewan Harris", "active": true, "timeZone": "Europe/Dublin" }, "body": "[~jonasfunk], is it only on a notched device like the 13 Pro or does it also occurs on non-notch devices?", "updateAuthor": { "name": "eharris", "key": "eharris", "displayName": "Ewan Harris", "active": true, "timeZone": "Europe/Dublin" }, "created": "2021-10-18T13:23:54.000+0000", "updated": "2021-10-18T13:23:54.000+0000" }, { "id": "459111", "author": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "body": "I havn't got a non-notch device at hand, so I havn't tested that, but I might be able to ask someone to test it for me. ", "updateAuthor": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-10-18T13:39:14.000+0000", "updated": "2021-10-18T13:39:14.000+0000" }, { "id": "459112", "author": { "name": "eharris", "key": "eharris", "displayName": "Ewan Harris", "active": true, "timeZone": "Europe/Dublin" }, "body": "I have a non-notch iPhone 7 and it looks to be ok for me, so I'm wondering if that's the case. [~jquick] [~gmathews] [~amukherjee] any of you have a notch device?", "updateAuthor": { "name": "eharris", "key": "eharris", "displayName": "Ewan Harris", "active": true, "timeZone": "Europe/Dublin" }, "created": "2021-10-18T13:50:44.000+0000", "updated": "2021-10-18T13:50:44.000+0000" }, { "id": "459114", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "body": "I'm only able to test in the iOS simulator. I sometimes see a flicker using the attached example code.\r\n\r\nMy guess from looking at the video is the {{remove()}} method is removing the view immediately from the screen (it's forcing a render) and the view you're adding is shown on the next rendered frame. Perhaps a better solution would be to switch to using the {{replaceAt()}} method?\r\nhttps://titaniumsdk.com/api/titanium/ui/view.html#replaceat\r\n\r\nHow does the following code run for you?\r\n{code:javascript}\r\nfunction createListView() {\r\n\tconst headerView = Ti.UI.createView({\r\n\t\theight: 300,\r\n\t\tbackgroundColor: 'blue',\r\n\t});\r\n\tconst listView = Ti.UI.createListView({\r\n\t\theaderView: headerView\r\n\t});\r\n\treturn listView;\r\n}\r\n\r\nconst win = Ti.UI.createWindow();\r\nconst addListviewButton = Ti.UI.createButton({\r\n\ttitle: 'Create listview',\r\n\tzIndex: 1000,\r\n\tbottom: 40,\r\n\theight: 50,\r\n\twidth: 200,\r\n\tstyle: Ti.UI.iOS.SystemButtonStyle.BUTTON_STYLE_OPTION_NEUTRAL\r\n});\r\naddListviewButton.addEventListener('click', () => {\r\n\tconst listView = createListView();\r\n\tif (win.children.length < 2) {\r\n\t\twin.add(listView);\r\n\t} else {\r\n\t\twin.replaceAt({ position: 1, view: listView });\r\n\t}\r\n});\r\nwin.add(addListviewButton);\r\nwin.add(createListView());\r\nwin.open();\r\n{code}\r\n\r\nNote: An even better solution would be to re-use the existing {{ListView}} by replacing its header and list items. This would be the most efficient thing to do... and it might solve that flicker issue since it looks like the {{remove()}} method is doing a blocking render like I said above.", "updateAuthor": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-10-18T22:37:23.000+0000", "updated": "2021-10-18T22:37:23.000+0000" }, { "id": "459115", "author": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Thanks for chiming in Joshua. I've created a new screen recording with your modification. I agree that it is a better approach to \r\n{noformat}\r\nreplace\r\n{noformat}\r\n than \r\n{noformat}\r\nremove\r\n{noformat}\r\n (got to remember to use that one more), but the result is more or less the same. I've attached a new video, and a screenshot of one of the frames where the issue is apparent. The header is centered for a single frame, causing the flicker. Going back to the issue in our app, which i've also attached a video of, I dont think reusing a single listview in tabs is a solution for us – either way, you will always see a flicker upon first creation. ", "updateAuthor": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-10-19T07:13:45.000+0000", "updated": "2021-10-19T07:13:45.000+0000" }, { "id": "459146", "author": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Got my hands on a non-notch device (iPhone 8), and there is no flicker, so it must be a notch device thing. ", "updateAuthor": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-10-28T08:50:43.000+0000", "updated": "2021-10-28T08:50:43.000+0000" }, { "id": "459180", "author": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "body": "I have tried adding top:0 to headerview in code, but that does not work. Not that this is the right solution, but I found that adding a top of 0 to \r\n{code:java}\r\n_headerViewProxy\r\n{code}\r\n in \r\n{code:java}\r\n- (void)configureHeaders, TiUIListView.m\r\n{code}\r\n seems to solve the issue.\r\nLike this:\r\n\r\n{code:java}\r\n[_headerViewProxy layoutProperties]->top = TiDimensionDip(0.0);\r\n{code}\r\n", "updateAuthor": { "name": "jonasfunk", "key": "jonasfunk", "displayName": "Jonas Funk Johannessen", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-11-29T14:10:49.000+0000", "updated": "2021-11-29T14:10:49.000+0000" } ], "maxResults": 14, "total": 14, "startAt": 0 } } }