iOS and Android, elements keep on drawing until they are completely white.

Bug Reports
1

Hi There,

I just discovered a bug, or; it might be that i’m doing something wrong. I am using a graphics theme for my App, and i’m using a style .ux file to give the basic elements some looks.

When i run my app on the Local simulator, all is good. However, when testing on iOS and Android, the app keeps on ‘painting’ over the elements. After a couple of seconds all elements (except images) are completely white.

This is how my App should look / does look the very first second:

file
Pl0KGJbxWynt-legacy-files-6smbYbgb7b9p45QV-JyVHNq2NAtonQyakZhn0Vfcp.png720×1280

Now after a couple of seconds, all the elements are white / ugly:

file
9uKGN8rVWsnQ-legacy-files-utppZDRPOOJMVKNf-kGeBDOdNbUC4y2ZqMQv5wNoV.png720×1280

This is how my ‘MainStyle.ux’ file looks:

<Style>
  <Page ux:Name="_pageSelf">
    <EnteringAnimation>
        <Move X="1" RelativeTo="ParentSize" Easing="CircularOut" Duration="0.2" />
    </EnteringAnimation>
    <ExitingAnimation>
        <Change _pageSelf.Opacity="0.6"  Easing="CircularOut" Duration="0.2"  />
    </ExitingAnimation>
  </Page>

  <Image StretchMode="UniformToFill"/>

  <TextInput TextColor="#D7DDEE" 
             PlaceholderColor="#6374A2"
             CaretColor="#AFBAD6"
             Font="Regular"
             Height="48"
             Margin="0,0,0,15"
             Name="_textInputSelf"
             HitTestMode="LocalBoundsAndChildren"
             Focus.IsFocusable="true"
             Focus.Delegate="_textInputCore"
             ClipToBounds="true"
             >
    <Text TextColor="{Property _textInputSelf.PlaceholderColor}"
      Font="Regular"
      Value="{Property _textInputSelf.PlaceholderText}"
      Alignment="TopLeft"
      Name="_textInputSelfLabel"
      Padding="3,21,3,0" />

    <Rectangle ux:Binding="Appearance" CornerRadius="2" Height="3" Alignment="Bottom">
      <SolidColor Color="#D7DDEE22" ux:Name="_textInputSelfBorder" />
    </Rectangle>

    <PlainTextEdit ux:Name="_textInputCore"
                   Height="40"
                   Width="98%"
                   Margin="0,33,0,0"
                    ClipToBounds="true" />
    <WhilePressed>
      <GiveFocus Target="_textInputCore" />
    </WhilePressed>

    <WhileContainsText Invert="true">
      <WhileFocused>
        <Change _textInputSelfBorder.Color="#95A4CD88"
             Duration="0.1" />
        <Change _textInputSelfLabel.FontSize="12"
          Duration="0.1"/>
        <Change _textInputSelfLabel.TextColor="#AFBAD6DD"
          Duration="0.1"/>
        <Move Target="_textInputSelfLabel"
          X="0"
          Y="-19"
          Duration="0.3"
          Easing="BackOut"
          EasingBack="BackInOut" />
      </WhileFocused>
    </WhileContainsText>

    <WhileContainsText>
      <WhileFocused>
        <Change _textInputSelfBorder.Color="#95A4CD88"
          Duration="0.2"
          Easing="QuadraticOut"  />
      </WhileFocused>

      <Change _textInputSelfLabel.FontSize="12"
        DurationBack="0.1"/>

      <Change _textInputSelfLabel.TextColor="#AFBAD6DD"
        DurationBack="0.1"/>
      <Move Target="_textInputSelfLabel"
          X="0"
          Y="-19"
        DurationBack="0.25"
        EasingBack="BackIn"/>
    </WhileContainsText>
  </TextInput>

  <Button Height="44" Name="_buttonSelf">
    <Rectangle Layer="Background" CornerRadius="7">
      <SolidColor Color="#1A294F" ux:Name="_buttonSelfBgColor" />

      <DropShadow Angle="90" Distance="3" Size="0.1" Color="#3A4562" ux:Name="_buttonSelfBgShadow" />
    </Rectangle>

    <Text TextColor="#AFBAD6"
      Font="Bold"
      Value="{Property _buttonSelf.Text}"
      Alignment="Center"
      Name="_buttonSelfLabel" />

    <WhilePressed>
      <Change _buttonSelfBgColor.Color="#132041" Duration="0.09" Easing="CubicOut" />
      <Change _buttonSelfBgShadow.Distance="1" Duration="0.09" Easing="CubicOut" />
      <Change _buttonSelfLabel.TextColor="#95A4CD" Duration="0.09" Easing="CubicOut" />
      <Move Target="_buttonSelf" Y="2" Duration="0.09" Easing="CubicOut" />
    </WhilePressed>
  </Button>
</Style>

This file is included in MainView.ux like so:

<App Theme="Graphics" Background="#000">
    <Font File="Assets/Fonts/Merriweather-Bold.ttf" ux:Global="Bold" />
    <Font File="Assets/Fonts/Merriweather-Regular.ttf" ux:Global="Regular" />
    <Font File="Assets/Fonts/Merriweather-Light.ttf" ux:Global="Light" />

    <JavaScript File="Models/UserModel.js" ux:Global="UserModel" />

    <DockPanel>
        <iOS.StatusBarConfig ux:Name="statusBarConfig" Style="Light" IsVisible="true"/>

        <MainStyle />

        <HierarchicalNavigation ux:Name="nav" ReuseExistingNode="false" Active="LoginPageElem" />

        <Page ux:Name="LoginPageElem">

              <Login />

        </Page>
    </DockPanel>
</App>

The loginpage that is being called from MainView.ux is pretty straight forward, a StackPanel with an image, 2 TextInput’s, some text and a button.

Anyone any idea why this is happening?

2

That is some really strange behavior! I will look into it, thanks for reporting :slight_smile:

3

Cheers. If you need my complete project folder or anything, just hit me up! I care to share, but giving everything out to public is a bit too much.