Screens(Pages) with background image flicker on iOS

[Sudhanshu Siddh]

Screens which have a background image set, flicker when using orientation.disableRotation()
The background turns white for a moment and then gets the background image, and this keeps repeating every time you rotate the device.

[Nathanael Anderson]

Thanks for the report. Do you have a sample XML and/or CSS so I know exactly how you are putting the background image on the screen.?

[Sudhanshu Siddh]

Thank you for the reply, here is the XML:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" loaded="loaded">
  <page.actionBar>
    <actionBar title="iStart">
    </actionBar>
  </page.actionBar>
  <ScrollView  class="test" id="sViewe">
    <StackLayout orietation= "veritcal">
      <android><Image src="res://iumoto" stretch="none" horizontalAlignment="center" class="logo"/></android>
      <ios><Image src="res://IUmoto" stretch="none" horizontalAlignment="center" class="logo"/></ios>
      <StackLayout orietation="vertical" class="stack" id="buStack">
        <Button text="Login" horizontalAlignment="center" tap="goToWebAuthPage"/>
        <Button text="Help" horizontalAlignment="center" tap="changeBg"/>
      </StackLayout>
    </StackLayout>
  </ScrollView>
</Page>

Here is the CSS:

.test {
    background-image: url("res://test");
    background-size: cover;
}

.stack {
    margin-left: 95;
    margin-right: 95;
    margin-top: 100;
    padding-bottom: 10;
    background-color: white;
    opacity: 0;
    border-radius: 20;
    min-width: 150;
    min-height: 105;
}

Button {
    margin: 10;
    padding: 2;
    font-size: 18;
    background-color: #7D110C;
    color: white;
    border-radius: 10;
    min-width: 50;
}

Button:highlighted { 
    background-color: #ac1710;
    color: white;
}


.action-image {
    width: 25;
    height: 25;
}

.action-label {
    font-size: 18;
    font-weight: bold;
}

.logo {
    margin-top: 10;
    margin-left: 10;
    margin-right: 10;
    margin-bottom: 80;
}

[Sudhanshu Siddh]

@NathanaelA Do you have an update on this? Thank you so much for looking into this.

[Nathanael Anderson]

Nope haven't had any time... I prioritize my paid work (I'm a contractor/freelancer) over ALL free support. When I have some free time, I'll take a look at it; but any and all free work is at my own convenience.

I am willing to take pull requests for fixes; if you want to investigate the issue. ;-)

[Sudhanshu Siddh]

Sounds fair, I will try to investigate the issue.

PS: We are using a lot of your plugins and I will need to talk to my boss to see if we can work with you or at least discuss some support for the plugins, if that interests you.

[Nathanael Anderson]

Yep, I love support contracts!

I honestly really hate seeing open issues on any of my plugins; but my wife really gets mad at me if I say yeah I fixed x, y, & z and then she says how many billable hours; uhm.... Zero... Happy wife; happy life. ;-)

[Sudhanshu Siddh]

Not sure if you made some changes but the issue is resolved after I updated to NativeScript 2.5.4

[Nathanael Anderson]

I actually have done some revamping of the orientation plugin, as I ran into an issue that needed to be fixed. One fix that has been put into place is that it sets/clears the ".landscape" now set during the loading event rather than the loaded event, by setting the value as early as possible; it can eliminate some redraws that would have occurred.

[Sudhanshu Siddh]

Yes I believe it was the redraws. Thanks a lot for the fix. Closing this issue.

[Sudhanshu Siddh]

@NathanaelA it seems the issue is not fixed, it is still flickering on orientation change. :(