bug: Collapsible Title not tall enough to contain accented capital

[Ericlm]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When setting a Collapsible title that contains an accented capital, the large title is cropped (on iOS), like what you can see under.

Important: the issue only occurs on a real device ; in Firefox with adaptative mode, it looks fine.

Expected Behavior

The large collapsible title should display fine whatever is his text. Or adapt his height, or its z-index.

Steps to Reproduce

1. Create a new Ionic-vue project
2. Inside Tab1Page, set a lot of text into the content.
3. In the same component, set something like Hello Ô for the large title
4. Run it on a real iOS device to see the issue : the large title will be cropped at the top

The template of Tab1Page is like follow:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Hello Ô</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Hello Ô</ion-title>
        </ion-toolbar>
      </ion-header>

      <!-- <ExploreContainer name="Tab 1 page" /> -->
      <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus explicabo illo ipsum pariatur inventore est quod dolorum quibusdam, maxime voluptatum vel odio nulla temporibus unde dolorem cumque perspiciatis numquam! Itaque quibusdam, dicta ab explicabo rerum repellendus aspernatur exercitationem distinctio eligendi ut iusto recusandae qui est suscipit sit, eveniet repellat unde porro amet facilis consequuntur. Porro, eos. Esse tempore repellendus optio expedita ab blanditiis eveniet necessitatibus maiores sint illum mollitia maxime minus deserunt debitis in quidem, id ut dolores nostrum. Reprehenderit nihil quia iusto molestiae porro in adipisci, voluptatibus eaque aspernatur aut doloremque nesciunt hic maxime, voluptatum harum ipsum nisi vero. Vero quas ad quidem distinctio. Officia repudiandae nihil consequatur distinctio error praesentium odit? Inventore, eaque, quam deserunt ipsa mollitia cum id repellendus nihil in ullam ex, asperiores voluptates consequuntur. Accusantium sint molestias in recusandae ad laborum, vitae facere ipsum temporibus repellat, repudiandae pariatur eum eveniet iusto cum illo ipsa omnis doloribus enim nobis veniam laboriosam incidunt ea. Odio laborum itaque quod modi temporibus perferendis a aspernatur molestias ipsam neque ducimus repudiandae quo expedita nulla necessitatibus veniam dignissimos, sed fugiat facilis porro blanditiis unde accusamus? Commodi ex laudantium incidunt provident, ipsam sit non rem ullam in quis dignissimos. Praesentium quidem maiores soluta architecto et similique, beatae reprehenderit sapiente alias nihil ad temporibus veritatis eos animi laborum neque voluptatibus esse numquam. A reiciendis, dolore corporis sunt rerum, minima maxime ipsum aliquam vero perferendis necessitatibus debitis. Fuga ea nisi facere minus adipisci sunt fugiat, sapiente at, alias est aliquid tempore sit soluta. Veniam quo minus nisi iusto repudiandae iure a repellat exercitationem asperiores nostrum, voluptatem, cum vitae doloribus dolore id voluptates. Minus exercitationem obcaecati adipisci! Sequi repellat hic dolor ad vel veritatis illo quis beatae, sunt voluptatem voluptates cum. Voluptates sit totam omnis quos ipsam aperiam deleniti, quasi ducimus cumque, possimus quis neque repudiandae consequatur rem fugit inventore ullam tempora explicabo vel nulla autem. Sint totam quis, consequuntur deleniti blanditiis non quia, nisi suscipit enim, sit voluptatum cumque maiores eius rerum omnis ipsam expedita tempora iure quasi voluptatibus aspernatur eum distinctio? Dolorum, magnam exercitationem. Cumque error reprehenderit laudantium maxime tempora provident esse laborum, sint, quibusdam aspernatur quam nihil qui dolores similique sed praesentium aperiam dicta non consequuntur a eligendi quidem ex autem eos! Inventore beatae illum dolore odio? Pariatur, modi nostrum doloremque libero natus aliquid aspernatur impedit vel ea perferendis unde, non, at illum qui animi corporis eum iusto tempore. Consequatur culpa dolorum asperiores quam facere nihil magnam provident, voluptatum corporis, vitae, exercitationem repellat! Neque culpa quibusdam quae dolorem optio. Ipsam eveniet nemo debitis accusantium tenetur error incidunt minima necessitatibus at neque consequuntur, et officiis vel expedita dignissimos distinctio accusamus, natus laborum magnam reiciendis, fugit quia ratione ipsum? Earum minima pariatur quidem ducimus labore aliquid eaque laboriosam exercitationem aliquam harum praesentium similique deleniti, placeat architecto. Fugiat, repudiandae. Ad magni eveniet accusamus est fuga error? Corporis blanditiis aliquid mollitia pariatur aut. Sapiente ratione delectus facilis adipisci cum. Porro facilis eos, doloremque eaque, eveniet fuga sit pariatur mollitia repudiandae consequuntur tempora voluptatum. Fugit quis eligendi nihil at rem itaque non molestias, repellendus, nam deserunt quas quidem voluptate placeat nobis ipsam soluta quod iusto ipsum voluptatem vel ducimus! Perferendis ea ducimus in reiciendis soluta, doloremque aperiam rerum eum possimus accusantium debitis illo explicabo nihil ut quidem reprehenderit? Sit doloremque veritatis nobis, atque mollitia quaerat quod impedit accusantium, assumenda aperiam sequi accusamus! Alias dolorem repellendus perspiciatis quae fugiat aperiam reprehenderit placeat error beatae inventore quis aut sapiente nobis molestias saepe itaque dolorum eveniet, iusto a excepturi modi quos quasi adipisci explicabo? Magnam dignissimos corrupti veritatis, voluptas ex illum nihil. Dolores assumenda expedita eaque tempore incidunt fugiat sit? Animi incidunt ratione et aperiam voluptas deleniti id eum recusandae ipsa tempore delectus placeat facilis soluta provident nam ut saepe inventore quaerat, sed sapiente assumenda consequuntur! Numquam eum dolores magnam, voluptates delectus officia porro recusandae cum? Accusamus dolor enim laudantium, veniam laboriosam est voluptatibus incidunt mollitia quas in nostrum reiciendis. Quo molestiae vero inventore nihil maiores natus, odit eos accusantium pariatur! Impedit quo, aliquid laudantium minus explicabo ea omnis a culpa perspiciatis voluptatibus temporibus rem? Temporibus iste tempora quas alias sequi, suscipit unde nostrum incidunt odio repellendus. Totam laborum rem obcaecati repellendus, ea, debitis impedit dicta at atque delectus ipsum repudiandae doloremque quia vel! Tenetur dolor odio non possimus, atque alias dicta molestias quia ullam? Nemo mollitia consequuntur sunt perspiciatis repudiandae explicabo similique nihil reprehenderit nostrum pariatur reiciendis, iure illum adipisci voluptate ut eveniet, vel ad cum soluta? Ipsum autem dolorum error consequuntur ratione architecto quo fugiat nam? Laudantium, quidem similique corrupti eaque molestiae doloribus id odit eos? Dolores velit ipsum placeat temporibus accusamus minus eligendi consequuntur ex aut sequi maiores error porro nihil dicta quia accusantium nesciunt reprehenderit unde facilis, repellendus sed eum. Reiciendis ipsa, dolor maxime eum sint quod. Nisi provident laudantium cum ut excepturi quasi, animi vel voluptatem obcaecati earum dignissimos debitis cupiditate itaque ab quo velit illum, voluptate nihil pariatur nam repellendus quas? Quidem, delectus recusandae ipsa quos tempora odit enim autem, neque, hic quisquam voluptate similique perferendis tempore quasi sed? Libero dolorem voluptatibus, quam eaque itaque atque quia in omnis vitae pariatur necessitatibus nobis modi, officia rerum iure molestiae laboriosam. Ab possimus et, hic necessitatibus ipsum, pariatur adipisci beatae doloribus, ratione quam velit qui eveniet sequi eligendi commodi ducimus dolorum dolore? Tenetur expedita vel facilis mollitia, cupiditate iure, enim placeat dignissimos autem suscipit fuga et reprehenderit quis nesciunt cumque similique eum rem voluptates amet assumenda? Omnis, praesentium quas? Eveniet eos rerum sapiente quae? Accusamus illum magnam odit, autem commodi velit consequatur, atque doloribus exercitationem dolorem quam quae esse excepturi placeat quod reprehenderit impedit. Quos dolor nostrum impedit corrupti, debitis unde doloremque hic consequuntur qui ducimus illum a deserunt. Dolores ex veritatis suscipit pariatur perspiciatis sit consequuntur odit vel recusandae quod culpa nostrum nemo in, aspernatur reiciendis placeat libero aperiam voluptatem? Officia, commodi dicta atque reprehenderit fugiat nostrum animi tenetur inventore repellat, velit tempore numquam rerum molestias consectetur quae. Reiciendis corporis iusto amet aliquam totam ducimus optio voluptatibus dolor iste vel. Error dignissimos enim velit. Praesentium.</span>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
// import ExploreContainer from '@/components/ExploreContainer.vue';
</script>

Code Reproduction URL

https://github.com/Ericlm/test-collapsible-title

Ionic Info

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'
       
       Require stack:
       - /Users/ericlemaitre/.asdf/installs/nodejs/18.14.0/lib/node_modules/@ionic/cli/lib/project/index.js
       - /Users/ericlemaitre/.asdf/installs/nodejs/18.14.0/lib/node_modules/@ionic/cli/lib/index.js
       - /Users/ericlemaitre/.asdf/installs/nodejs/18.14.0/lib/node_modules/@ionic/cli/index.js
       - /Users/ericlemaitre/.asdf/installs/nodejs/18.14.0/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

   Ionic CLI       : 7.1.1 (/Users/ericlemaitre/.asdf/installs/nodejs/18.14.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 7.2.3

Capacitor:

   Capacitor CLI      : 5.2.2
   @capacitor/android : not installed
   @capacitor/core    : 5.2.2
   @capacitor/ios     : 5.2.2

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.2

System:

   NodeJS : v18.14.0 (/Users/ericlemaitre/.asdf/installs/nodejs/18.14.0/bin/node)
   npm    : 9.8.1
   OS     : macOS Unknown

=> not using android in this test project, so the warning is normal :)

Additional Information

Key informations :

• Only occurs on real device, does not occur on Firefox adaptative mode (whatever iOS device is selected)
• Needs quite big title, like accented capital, but can be seen with other tall characters

[liamdebeasi]

Thanks for the report. Here is a dev build with a proposed fix if you are interested in testing:

npm install @ionic/[email protected] @ionic/[email protected]

[Ericlm]

It works ! Thank you, I tested it on iPhone 13, and it works perfectly fine 😃

[liamdebeasi]

Thanks for the issue. This has been resolved via #27969, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.