Layout mismatch between iOS and Local Preview

Bug Reports
1

I’m making a simple layout in the app like this:

<Grid ColumnCount="2" Columns="1,1" Alignment="VerticalCenter">
 <Panel>
  <StackPanel>
   <TextoHora Value="{horaAyer}" />
   <TextoTemp Value="{tempAyerTexto}" />
 </StackPanel>
 <Rectangle Width="1" Fill="#ffffff" Alignment="Right" />
</Panel>
<Panel>
  <Rectangle Width="1" Fill="#ffffff" Alignment="Left" />
  <StackPanel>
   <TextoHora Value="{horaHoy}" />
   <TextoTemp Value="{tempHoyTexto}" />
 </StackPanel>
</Panel>
</Grid>

(this is just the code for the mismatch part, not the whole layout)

In the Local Preview is looking fine, like this:

https://www.dropbox.com/s/k8d5vy29kp8ijib/Screenshot%202015-10-07%2014.11.17.png?dl=0

But when I preview it on iOS or make a compiled version it look like this:

https://www.dropbox.com/s/3mbwepvfpzcrs4r/IMG_1835.PNG?dl=0

(ignore the wrong characters, there’s another bug thread for that :wink: )

As you can see, I expect the Panel to take all the height of both texts but this is not happening in iOS. It’s a bug or is there anyway I can make this layout different to make it work?

Thanks,

2

Looks like a bug indeed. I’ll make a simple repro case and send it to the team internally. Thanks!

3

Interestingly enough, when I tried to make a reproduction case, it worked fine for me. This is the code:

<App Theme="Basic" ClearColor="#222">
    <Grid ColumnCount="2" Columns="1,1" Alignment="Center">
        <Style>
            <Text TextColor="#fff" Margin="2" />
        </Style>

        <Panel>
            <StackPanel>
                <Text>A</Text>
                <Text>B</Text>
            </StackPanel>
            <Rectangle Width="1" Fill="#fff" Alignment="Right" />
        </Panel>
        <Panel>
            <Rectangle Width="1" Fill="#fff" Alignment="Left" />
            <StackPanel>
                <Text>C</Text>
                <Text>D</Text>
            </StackPanel>
        </Panel>
    </Grid>
</App>

And the output:

file
zFwY07nIEtdR-legacy-files-yfHEKFCf83qGEBjL-X9-xwxkQhBoiLIY4ze9tfHmc.png379×693

And this was the same on iOS. I’m starting to suspect it’s actually related to the incorrect font rendering/measuring as you mentioned in this thread: https://www.fusetools.com/community/forums/bug_reports/bad_encoding_in_ios_preview

4

After checking with different characters, I’m unable to reproduce this locally. I’m starting to suspect the font. Which font are you using?

5

Thanks for the answer Jake!

For the numbers I’m using SourceSansPro-Light downloaded from Google Fonts. The other one is SourceSansPro-Regular.

6

The strange thing is that the error happens also when compiling the app on iOS (and in the compiled version, the characters are right, they appear with the correct accents)

7

I’ll grab those fonts and take a look as soon as I can. I think we use platform-specific text rendering on devices for performance and consistency with other apps, and that might be what’s causing the discrepancy. Need to double-check, though.

8

Thanks Jake! Also I wanted to say that with Fuse 0.5.X this didn’t happened, the layout was correctly rendered.

9

I’ve sat down with it for another couple hours, I just can’t get it to break. Even when using the fonts you mentioned, and the degrees symbol specifically, I can’t seem to reproduce it. Is it possible for you to package up a zip for me with JUST the necessary code to trigger the bug in a project that I can run locally?

10

Juani and I were finally able to repro this. I’ve raised issues about it internally and we’ll follow up asap :slight_smile: