Icons from framework7-core-icons sometimes don't show up

Questions
1

Hey!
I use the “MD” theme for Android and iOS. Everything is running well on Android but on iOS the icons from the framework7-core-icons font-family sometimes don’t show up. About every tenth time I open the iOS app, the tick in a checkbox or the right arrow in a list-link is not visible. I see a “checkbox_md” instead of the tick. It seems happen only to icons in psydo CSS classes like ::before and ::after.

The framework7-core-icons font-family is added to the framework7.css, i didn’t touch this:

@font-face {
  font-family: 'framework7-core-icons';
  src: url("data:application/font-woff;charset=utf-8;base64, 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") format("woff");
  font-weight: 400;
  font-style: normal;
}

Here is my index.html:

<!DOCTYPE html>
<html>                      
<head>
<title>My App</title>
<meta http-equiv="Content-Security-Policy" content="default-src * gap: file:; style-src 'self' 'unsafe-inline'; img-src * data:; script-src * 'unsafe-inline' 'unsafe-eval'; font-src * data:;">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#0C2530">
<link rel="stylesheet" href="lib/framework7/css/framework7.bundle.min.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
<script type="text/javascript">
function onLoad(){
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("deviceready", initApp, false);
}
</script>
</head>
<body onload="onLoad()">
... content ...
<script type="text/javascript" src="lib/framework7/js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</body>
</html>

I use version 5.7.6 from github.

Any ideas what’s wrong here?

1668×2224 289 KB

2

See browser dev tools when it happens, there should be some error that will help you to debug

3

It doesn’t happen in the Browser or Android, only on real iOS devices.

4

And you can connect real iOS device to your mac and debug it via Safari

5

Not yet, i don’t have a Mac but i will try it on a virtual machine.

6

When i connect my iPhone to a mac and debug it via Safari, it doesn’t work with my app, only when i run the code in Safari on my device. The error doesn’t occure in the browser version.
I found a fix. It only happens when i run my javascript code for the different pages on pageInit. After i changed it to pageAfterIn it works for me. For example:

app = new Framework7({
  root: '#app',
  name: 'MyApp',
  id: 'com.example.myapp',
  picker: {
    rotateEffect: false,
    momentumRatio: 20,
    openIn: 'sheet',
    toolbarCloseText: '<i class="f7-icons">chevron_down</i>'
  },
  theme: 'md',
  navbar: {
    mdCenterTitle: true,
    showOnPageScrollEnd: false,
  },
  panel: {
    swipe: true,
    swipeActiveArea: 40
  },
  smartSelect: {
    closeOnSelect: true,
    scrollToSelectedItem: true,
    openIn: 'sheet',
    sheetCloseLinkText: '<i class="f7-icons">chevron_down</i>'
  },
  input: {
    scrollIntoViewOnFocus: true
  },
  touch: {
    tapHold: true,
    mdTouchRipple: false
  },
  routes: [
  {name: 'welcome', path: '/welcome/', url: 'welcome.html', options: {animate: false, reloadCurrent: true}, on: {pageInit: function(){... my Javascript code ...}}},
  {name: 'home', path: '/home/', url: 'home.html', options: {animate: false, reloadCurrent: true}, on: {pageInit: function(){... my Javascript code ...}}}
  ]
});

Changed it to:

app = new Framework7({
  root: '#app',
  name: 'MyApp',
  id: 'com.example.myapp',
  picker: {
    rotateEffect: false,
    momentumRatio: 20,
    openIn: 'sheet',
    toolbarCloseText: '<i class="f7-icons">chevron_down</i>'
  },
  theme: 'md',
  navbar: {
    mdCenterTitle: true,
    showOnPageScrollEnd: false,
  },
  panel: {
    swipe: true,
    swipeActiveArea: 40
  },
  smartSelect: {
    closeOnSelect: true,
    scrollToSelectedItem: true,
    openIn: 'sheet',
    sheetCloseLinkText: '<i class="f7-icons">chevron_down</i>'
  },
  input: {
    scrollIntoViewOnFocus: true
  },
  touch: {
    tapHold: true,
    mdTouchRipple: false
  },
  routes: [
  {name: 'welcome', path: '/welcome/', url: 'welcome.html', options: {animate: false, reloadCurrent: true}, on: {pageAfterIn: function(){... my Javascript code ...}}},
  {name: 'home', path: '/home/', url: 'home.html', options: {animate: false, reloadCurrent: true}, on: {pageAfterIn: function(){... my Javascript code ...}}}
  ]
});

And it works now.

7

I have the exact same issue but your solution is not making sense to me. What does the configuration shown have to do with icons not showing? I didnt do anything similiar to what you do, in fact I am just loading a singular page with icons and randomly on IOS they dont show and only show alt text. There is no rhyme or reason, i can go hours without seeing the issue occur. I debugged via Safari with both emulator and real device and all that I see is the font family must not be getting loaded or something. Adding meta tags such as <meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; style-src 'self' 'unsafe-inline';"> made no difference because they load sometimes so that clearly is not the issue. Anybody have an idea, this stopped my project dead in its tracks.

@font-face {
font-family: framework7-core-icons;
src: url("data:application/font-woff;charset=utf-8;base64,adsfadssf…

8

Yes you are right, my problem is also still there but it rarely happens now. I have no idea, please let me know in case you found a workaround.

9

I’ve tried a F7 custom build (https://framework7.io/docs/custom-build.html) and it doesn’t happen anymore so far. My custom-build-config.js looks like:

const config = {
  rtl: false,
  components: [
    // Appbar
    //'appbar',

    // Modals
    'dialog',
    //'popup',
    //'login-screen',
    'popover',
    //'actions',
    'sheet',
    'toast',

    // Loaders
    'preloader',
    //'progressbar',

    // List Components
    //'sortable',
    //'swipeout',
    'accordion',
    //'contacts-list',
    //'virtual-list',
    //'list-index',

    // Timeline
    'timeline',

    // Tabs
    'tabs',

    // Panel
    'panel',

    // Card
    'card',

    // Chip
    //'chip',

    // Form Components
    'form',
    'input',
    'checkbox',
    'radio',
    'toggle',
    'range',
    'stepper',
    'smart-select',

    // Grid
    'grid',

    // Pickers
    'calendar',
    'picker',

    // Page Components
    'infinite-scroll',
    'pull-to-refresh',
    //'lazy',

    // Data table
    //'data-table',

    // FAB
    'fab',

    // Searchbar
    //'searchbar',

    // Messages
    //'messages',
    //'messagebar',

    // Swiper
    'swiper',

    // Photo Browser
    //'photo-browser',

    // Notifications
    //'notification',

    // Autocomplete
    'autocomplete',

    // Tooltip
    //'tooltip',

    // Gauge
    //'gauge',

    // Skeleton
    //'skeleton',

    // Menu
    'menu',

    // Color Picker
    //'color-picker',

    // Tree View
    //'treeview',

    // WYSIWYG Editor
    //'text-editor',

    // Elevation
    //'elevation',

    // Typography
    'typography',

    // VI Video Ads
    //'vi',
  ],
  darkTheme: true,
  lightTheme: true,
  themes: [
    //'ios',
    'md',
    //'aurora',
  ],
  themeColor: '#007aff',
  colors: {
    red: '#ff3b30',
    green: '#4cd964',
    blue: '#2196f3',
    pink: '#ff2d55',
    yellow: '#ffcc00',
    orange: '#ff9500',
    purple: '#9c27b0',
    deeppurple: '#673ab7',
    lightblue: '#5ac8fa',
    teal: '#009688',
    lime: '#cddc39',
    deeporange: '#ff6b22',
    gray: '#8e8e93',
    white: '#ffffff',
    black: '#000000',
  },
};

module.exports = config;