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.

    0_1477984259735_Screenshot_2016-11-01-13-54-33.jpg

    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>
        </div>
    </ons-modal>
    

    Below is CSS:

    .loading-area{
      background-color: #FFF;
      border-radius: 20px !important;
      margin-left: 5%;
      margin-right: 5%;
      height: 30%;
    }
    .loading-text{
      color: #000;
      font-size: 15px;
    }
    .loading-image{
      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 :(


Log in to reply