Monaca Onsen UI Discord Chat Github Repo

Issue happen when display loading a modal by GIF file using ons-modal

  • Hi all,
    Currently, I am using Onsen v1.3 for my Monaca project and I need to display a Loading modal using ons-modal element. Everything is ok except for one issue which display Loading using a GIF file.
    Detail: the Loading using GIF file work fine. But there is one un-expected black small line during loading running. And I cannot found the root cause as well as solution to remove it. Please find detail at attachment.


    Below is code:

    <ons-modal var="modal">
        <div class="loading-area">
            <img class="loading-image" src="img/loading.gif">
            <p class="loading-text">Loading...</p>

    Below is CSS:

      background-color: #FFF;
      border-radius: 20px !important;
      margin-left: 5%;
      margin-right: 5%;
      height: 30%;
      color: #000;
      font-size: 15px;
      height: 80px;
      width: 80px;
      padding-top: 20px;

    One more thing that is I tested the same code on codeoppen and this issue not happen :( (please find code here )

    Please help me :(

  • Hey, I found the root cause of this issue that is the “page__content” has “overflow: scroll”. If I change that property to “hidden”, the issue is not happened. And I do not the reason :(