Titanium JIRA Archive
Appcelerator Community (AC)

[AC-6724] iOS 15: Glitch in headerview when creating ListView

GitHub Issuen/a
TypeBug
Priorityn/a
StatusOpen
ResolutionUnresolved
Affected Version/sn/a
Fix Version/sn/a
Componentsn/a
Labelsios-15
ReporterJonas Funk Johannessen
AssigneeAbir Mukherjee
Created2021-10-13T08:55:37.000+0000
Updated2021-11-29T14:10:49.000+0000

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.

Attachments

FileDateSize
glitch.mov2021-10-13T08:54:30.000+00003207527
listviewWithReplace.mov2021-10-19T07:13:59.000+00001614763
RPReplay_Final1634561670.MP42021-10-18T13:01:07.000+00001550464
Screenshot_listviewWithReplace.png2021-10-19T07:14:05.000+0000255318

Comments

  1. Ewan Harris 2021-10-14

    [~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
  2. Jonas Funk Johannessen 2021-10-14

    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.
  3. Jonas Funk Johannessen 2021-10-14

    By better example do you mean, you are not able to see the issue in the video, or do mean an example with code?
  4. Ewan Harris 2021-10-14

    Ideally a code sample would be best
  5. Jonas Funk Johannessen 2021-10-18

    {noformat} const win = Ti.UI.createWindow(); const addListviewButton = Ti.UI.createButton({ title: 'Create listview', zIndex:1000, bottom:40, height:50, width:200, style:Ti.UI.iOS.SystemButtonStyle.BUTTON_STYLE_OPTION_NEUTRAL }); addListviewButton.addEventListener('click',function(){ win.add(createListView()); }); win.add(addListviewButton); win.open(); win.add(createListView()); function createListView(){ //Remove listview if already added if(win.children.length == 2) win.remove(win.children[1]); const headerView = Ti.UI.createView({ height:300, backgroundColor:'blue' }); const listView = Ti.UI.createListView({ headerView: headerView }); return listView; } {noformat}
  6. Jonas Funk Johannessen 2021-10-18

    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.
  7. Jonas Funk Johannessen 2021-10-18

    I should emphasise that this is only observable when running on device. Simulator is fine.
  8. Ewan Harris 2021-10-18

    [~jonasfunk], is it only on a notched device like the 13 Pro or does it also occurs on non-notch devices?
  9. Jonas Funk Johannessen 2021-10-18

    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.
  10. Ewan Harris 2021-10-18

    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?
  11. Joshua Quick 2021-10-18

    I'm only able to test in the iOS simulator. I sometimes see a flicker using the attached example code. My 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? https://titaniumsdk.com/api/titanium/ui/view.html#replaceat How does the following code run for you? 
        function createListView() {
    	const headerView = Ti.UI.createView({
    		height: 300,
    		backgroundColor: 'blue',
    	});
    	const listView = Ti.UI.createListView({
    		headerView: headerView
    	});
    	return listView;
    }
    
    const win = Ti.UI.createWindow();
    const addListviewButton = Ti.UI.createButton({
    	title: 'Create listview',
    	zIndex: 1000,
    	bottom: 40,
    	height: 50,
    	width: 200,
    	style: Ti.UI.iOS.SystemButtonStyle.BUTTON_STYLE_OPTION_NEUTRAL
    });
    addListviewButton.addEventListener('click', () => {
    	const listView = createListView();
    	if (win.children.length < 2) {
    		win.add(listView);
    	} else {
    		win.replaceAt({ position: 1, view: listView });
    	}
    });
    win.add(addListviewButton);
    win.add(createListView());
    win.open();
    Note: 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.
  12. Jonas Funk Johannessen 2021-10-19

    Thanks for chiming in Joshua. I've created a new screen recording with your modification. I agree that it is a better approach to {noformat} replace {noformat} than {noformat} remove {noformat} (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.
  13. Jonas Funk Johannessen 2021-10-28

    Got my hands on a non-notch device (iPhone 8), and there is no flicker, so it must be a notch device thing.
  14. Jonas Funk Johannessen 2021-11-29

    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 
        _headerViewProxy
    in 
        - (void)configureHeaders,  TiUIListView.m
    seems to solve the issue. Like this: 
        [_headerViewProxy layoutProperties]->top = TiDimensionDip(0.0);

JSON Source