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

saothienhat

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>
    </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 :(

saothienhat

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 :(