Xamarin.forms: [Bug] Custom font not displaying correctly when loading the page again

[NickeManarin]

Description

I'm trying to use a custom glyph font. It works the first time that the View appears, but the second time a rectangle with a X inside will be rendered instead.

Steps to Reproduce

1. I simply created a font online using the IconMoon web app.
2. I added the font to the Android project normally, adding as AndroidAsset.
3. I created a simple IconLabel extending Label.
4. After that I added two resources in the App.xaml file:

<OnPlatform x:Key="Font.Glyph" x:TypeArguments="x:String">
     <On Platform="Android" Value="Fonts/project_icons.ttf#ProjectIcons"/>
     <On Platform="iOS" Value="ProjectIcons"/>
 </OnPlatform>

<Style TargetType="{x:Type n:IconLabel}">
    <Setter Property="FontFamily" Value="{StaticResource Font.Glyph}"/>
    <Setter Property="FontSize" Value="40"/>
    <Setter Property="TextColor" Value="{DynamicResource Color.Foreground}"/>
</Style>

1. I have a ContentPage that displays multiple ContentViews. When changing the content view being displayed (back and forth), after the displaying the glyphs correctly one time, all subsequent displays will have the incorrect glyph.

Basic Information

• Version with issue:
• Last known good version: n/a
• IDE: Visual Studio for Windows. 16.1.4
• Platform Target Frameworks: Only tested in Android.
  
  
  
  • iOS: n/a
  
  
  • Android: 9 (pie)
  
  
  • UWP: n/a
  
  
• Android Support Library Version: 28
• Nuget Packages:
  Rg.Plugins.Popup 1.1.5.188 MyApp
  Microsoft.EntityFrameworkCore 2.2.4 MyApp
  Polly 7.1.0 MyApp
  Microsoft.EntityFrameworkCore.Sq... 2.2.4 MyApp
  Xamarin.FFImageLoading 2.4.11.982 MyApp
  NodaTime 2.4.5 MyApp
  Microsoft.EntityFrameworkCore.De... 2.2.4 MyApp
  Xamarin.Forms.GoogleMaps 3.2.0 MyApp
  Sharpnado.Forms.HorizontalListView 1.1.0 MyApp
  Xamarin.FFImageLoading.Forms 2.4.11.982 MyApp
  Plugin.Permissions 5.0.0-beta MyApp
  Xam.Plugin.Connectivity 3.2.0 MyApp
  Xamarin.FFImageLoading.Transform... 2.4.11.982 MyApp
  CarouselView.FormsPlugin 5.2.0 MyApp
  DLToolkit.Forms.Controls.FlowLis... 2.0.11 MyApp
  Forms.Controls.FlexButton 0.9.1 MyApp
  fusillade 2.0.5 MyApp
  Ideine.ModernHttpClient 3.2.2 MyApp
  DLToolkit.Forms.Controls.TagEntr... 1.0.5 MyApp
  Microsoft.EntityFrameworkCore.Tools 2.2.4 MyApp
  MLToolkit.Forms.SwipeCardView 2.0.0 MyApp
  Xam.Plugin.Media 4.0.1.5 MyApp
  Xamarin.Essentials 1.1.0 MyApp
  NETStandard.Library 2.0.3 MyApp
  Xamarin.Forms.PancakeView 1.0.21 MyApp
  Refit 4.7.9 MyApp
  Xamarin.Forms 4.0.0.482894 MyApp
  DLToolkit.Forms.Controls.ImageCr... 1.0.7 MyApp
  CarouselView.FormsPlugin 5.2.0 MyApp.iOS
  DLToolkit.Forms.Controls.FlowLis... 2.0.11 MyApp.iOS
  DLToolkit.Forms.Controls.ImageCr... 1.0.7 MyApp.iOS
  DLToolkit.Forms.Controls.TagEntr... 1.0.5 MyApp.iOS
  Forms.Controls.FlexButton 0.9.1 MyApp.iOS
  Plugin.Permissions 5.0.0-beta MyApp.iOS
  Rg.Plugins.Popup 1.1.5.188 MyApp.iOS
  Sharpnado.Forms.HorizontalListView 1.1.0 MyApp.iOS
  Xam.Plugin.Media 4.0.1.5 MyApp.iOS
  Xamarin.FFImageLoading 2.4.11.982 MyApp.iOS
  Xamarin.FFImageLoading.Forms 2.4.11.982 MyApp.iOS
  Xamarin.FFImageLoading.Transform... 2.4.11.982 MyApp.iOS
  Xamarin.Forms 4.0.0.482894 MyApp.iOS
  Xamarin.Essentials 1.1.0 MyApp.iOS
  Xamarin.Forms.GoogleMaps 3.2.0 MyApp.iOS
  CarouselView.FormsPlugin 5.2.0 MyApp.Android
  DLToolkit.Forms.Controls.FlowLis... 2.0.11 MyApp.Android
  DLToolkit.Forms.Controls.ImageCr... 1.0.7 MyApp.Android
  DLToolkit.Forms.Controls.TagEntr... 1.0.5 MyApp.Android
  Forms.Controls.FlexButton 0.9.1 MyApp.Android
  Plugin.Permissions 5.0.0-beta MyApp.Android
  Rg.Plugins.Popup 1.1.5.188 MyApp.Android
  Sharpnado.Forms.HorizontalListView 1.1.0 MyApp.Android
  Xam.Plugin.Media 4.0.1.5 MyApp.Android
  Xamarin.FFImageLoading 2.4.11.982 MyApp.Android
  Xamarin.FFImageLoading.Forms 2.4.11.982 MyApp.Android
  Xamarin.FFImageLoading.Transform... 2.4.11.982 MyApp.Android
  Xamarin.Forms 4.0.0.482894 MyApp.Android
  Xamarin.Android.Support.Design 28.0.0.1 MyApp.Android
  Xamarin.Android.Support.v7.AppCo... 28.0.0.1 MyApp.Android
  Xamarin.Android.Support.v4 28.0.0.1 MyApp.Android
  Xamarin.Android.Support.v7.CardView 28.0.0.1 MyApp.Android
  Xamarin.Android.Support.v7.Media... 28.0.0.1 MyApp.Android
  Xamarin.Android.Support.Core.Utils 28.0.0.1 MyApp.Android
  Xamarin.Android.Support.CustomTabs 28.0.0.1 MyApp.Android
  Xamarin.Essentials 1.1.0 MyApp.Android
  Xamarin.Forms.GoogleMaps 3.2.0 MyApp.Android
  Xamarin.GooglePlayServices.Location 60.1142.1 MyApp.Android
• Affected Devices: Nokia 6.1 Plus, works normally when debugging in emulator.

Screenshots

This is the result:

Reproduction Link

Not yet...

[NickeManarin]

It has something to do with the previous view being displayed. I have to do more tests.

[toomasz]

Duplicate of https://github.com/xamarin/Xamarin.Forms/issues/6317
See my comment for workaround

[NickeManarin]

@toomasz Is it? Because mine is a simple Label, not a FontImageSource.
Btw, I noticed that it only happens when going back and forth displaying the previous View in which it contains a dragabble list view by the Sharpnado nuget and images from FFImageLoading nuget.

For example, if I go to the next view and go back to the view that displays the label from the picture, it will work normally.

[andreinitescu]

@NickeManarin I strongly suggest you attach a sample which reproduces the issue in order to increase the chance of getting it fixed. I know, I know, it's boring but it's worth it 👌.

[NickeManarin]

@andreinitescu Yes, that was my original idea. But since the project is closed source, I need to create a sample project that simulates the issue.
I'm going to do that in the following days.

[James3UK]

@NickeManarin Try the fix here https://github.com/xamarin/Xamarin.Forms/issues/6317#issuecomment-498358580 if it fixes the issue then it's a duplicate as mentioned above.

[NickeManarin]

It happened something worse, now the icons inside a FontImageSource (inside a button) are gone.
But... I'm not experiencing the issue with the faulty icon anymore with the IconLabel (that extends a Label).

[NickeManarin]

At first I thought it could be something related to the fact that my button was invisible at first (but later was being displayed), but I tested on a button that is always visible... Same issue.

[jsuarezruiz]

Duplicate of #6317. @NickeManarin if you think it's different, add a comment. And if you can a repro sample ;)

[NickeManarin]

So, here's the test project: https://github.com/NickeManarin/Xamarin.Demos2

There's two files in which I want you people to see:

• TestApp.Droid/Renderers/FontIconLabelRenderer.cs
• TestApp.Droid/Helpers/FontImageSourceHandler.cs

Both have commented lines, right above the namespace declaration.

1. Now, run the Android project and click on the blue Options button.
2. It should open a sliding dialog with two kinds of icons: One "close" icon using the FontIconLabel class and other two buttons using the FontImageSource.
3. Click on the background to dismiss the dialog, and open again. It should see that the red "close" icon is faulty (a rectangle with an X inside).
4. Now, uncomment the code inside the FontImageSourceHandler class.
5. Run again, open the same dialog as before.
6. Notice that the icons are missing in the buttons (FontImageSource), but the FontIconLabel now no longer fails to render the icon.
7. Now, comment again the code from the FontImageSourceHandler class and uncomment the one inside the FontIconLabelRenderer.
8. Test again.

So, the only way to solve this issue for me was to create a label renderer that sets its Font manually.

[jsuarezruiz]

Thanks for the sample!. Yes, I see the problem.

[James3UK]

@NickeManarin I built a custom nuget based on https://github.com/xamarin/Xamarin.Forms/issues/6317 / https://github.com/xamarin/Xamarin.Forms/pull/6470 and it does seem to fix your issue. Give it a try and confirm if that is the case?
Xamarin.Forms.9.9.16.zip

[jfversluis]

@NickeManarin would you be able to have another look with the latest Xamarin.Forms version?

According to issue #6317 this is likely to be fixed now. Would be great if you could verify that this fixes it for you as well and close the issue accordingly, thanks!

[ArgusMagnus]

The bug is fixed for most controls in the latest Xamarin version, but this is still an issue, when a FontImageSource is used as Shell.FlyoutIcon or SearchHandler.QueryIcon.