iOS: sheet modal misses top margin when having toolbar

まず、iOS スタイルモードを使用する新しい Framework7 アプリで、提供された bottom-sheet マークアップを再現し、その後 Android/MD のレンダリングと比較します。上部のスペースの原因となっている sheet modal と toolbar のスタイルを調査します。iOS モードで toolbar に期待される上部マージンがあり、Android テーマにリグレッションがないことを確認できれば完了です。

• Framework7 version: 9.0.3
• Platform and Target: Chrome Browser, PWA/WebApp in iOS style mode

Describe the bug

When adding a bottom sheet with a toolbar at the top, the iOS layout misses a top margin, see the screenshot and code below.

To Reproduce

Steps to reproduce the behavior:

1. Create a new Framework7 app
2. Add a bottom sheet
3. Add a toolbar
4. See error on iOS theme

Expected behavior

I expect both themes to show toolbar properly.

Actual Behavior

While Android works fine, iOS theme shows missing top margin.

Screenshots

iOS theme:

MD theme:

Additional context

The HTML markup used is as follows:

<template>
    <div class="sheet-modal height-auto">
        <div class="toolbar">
            <div class="toolbar-inner">
                <div class="left margin-left-half">Neuen Ort erstellen</div>
                <div class="right">
                    <a class="link" @click="${discardLocation}">Abbrechen</a>
                </div>
            </div>
        </div>
        <div class="sheet-modal-inner">
            <div class="page-content">
                <!-- <div class="block-title">Neuen Ort erstellen</div> -->
                <form class="form-store-data" id="formLocationEdit">
                    <div class="list list-strong-ios list-dividers-ios inset-ios margin-top-half margin-bottom-half">
                        <ul>
                            <li class="item-content item-input item-input-with-info">
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                        <input type="text" placeholder="Hallen- oder Raum-Name" name="locName" required validate />
                                        <span class="input-clear-button"></span>
                                        <div class="item-input-info">Name des Ortes</div>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content item-input item-input-with-info">
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                        <input type="text" placeholder="Musterstr. 12" name="locStreet" required validate />
                                        <span class="input-clear-button"></span>
                                        <div class="item-input-info">Straße und Hausnummer</div>
                                    </div>
                                </div>
                            </li>
</ul>
</div>