Bootstrap modal issue on iOS 8.1.3

Question

У меня возникла проблема в Bootstrap Modal только для версии iOS 8.1.3. У меня есть вертикальная прокрутка, способная работать внутри модальной. Когда я касаюсь модального фона, попробуйте прокрутить текст внутри этого div, текст иногда исчезает или замирает, а затем через несколько секунд я могу прокручивать. Что-то странное. Любая помощь будет действительно заметной.

Спасибо!

Answer 1

<section class="parent"> 
    <h1>Modal a Different Way <small>Using CSS and JS</small></h1> 

    <div class="child"> 
    <button class="cakeModalJS">Click Me!</button> 
    <p>I have same behaviour what you have using to Modal concept except common UI issues.</p> 
    </div> 

    <div class="cake-modal cake-hidden"> 
    <div class="modal-body"> 
     <button class="modal-close">x</button> 
     <h3> 
     Look I'm your inbuild Modal module 
     </h3> 
    </div> 
    </div> 
    <footer> 
    <p>Cake Modal by Color Cake. All Right Recieved &copy; 2018</p> 
    </footer> 
</section> 
$('.cakeModalJS').click(function(){ 
    $('.cake-modal').removeClass('cake-hidden'); 
}); 

$('.cake-modal').on('click', function(e) { 
    if (e.target !== this) 
    return; 

    $('.cake-modal').addClass('cake-hidden'); 
}); 

$('.modal-close').click(function(){ 
    $('.cake-modal').addClass('cake-hidden'); 
}); 

$color1: #5b5b5b; 
$color2: #fff; 

@mixin btn-gray { 
    -webkit-transition: all .2s ease-out; 
    -moz-transition: all .2s ease-out; 
    -o-transition: all .2s ease-out; 
    transition: all .2s ease-out; 
    border: 1px solid $color1; 
    cursor: pointer; 
    background: $color2; 
    &:hover{ 
    -moz-box-shadow: inset 1px 0px 4px $color1; 
    -webkit-box-shadow: inset 1px 0px 4px $color1; 
    box-shadow:   inset 1px 0px 4px $color1; 
    text-shadow: 0.01px 0.01px 0.01px rgba(91, 91, 88, 0.4); 
    } 
} 


.cake-hidden{ 
    display: none; 
} 
.parent{ 
    position: relative; 
    padding: 10px; 
    height: 95vh; 
    border: 2px solid $color1; 
    text-align: center; 
    color: $color1; 
    z-index: 1; 
    h1{ 
    margin-top: 0; 
    border-bottom: 1px solid; 
    small{ 
     font-size: 40%; 
    } 
    } 
} 
.child{ 
    text-align: left; 
    button{ 
    border: 1px solid $color1; 
    padding: 10px; 
    cursor: pointer; 
    @include btn-gray; 
    } 
    p{ 
    display: inline; 
    color: $color1; 
    } 
} 
.cake-modal{ 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    background: rgba(91, 91, 88, 0.2); 
    z-index: 2; 
    .modal-body{ 
    position: absolute; 
    width: calc(100vw/2); 
    height: calc(100vh/2); 
    background: $color2; 
    z-index: 3; 
    -moz-box-shadow: 1px 0px 4px $color1; 
    -webkit-box-shadow: 1px 0px 4px $color1; 
    box-shadow:   1px 0px 4px $color1; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%); 
    text-align: left; 
    padding:10px; 
    h3{ 
     margin-top: 0; 
    } 
    .modal-close{ 
     float: right; 
     padding: 8px 8px; 
     line-height: 10px; 
     font-weight: 600; 
     @include btn-gray; 
    } 
    } 
} 
footer{ 
    position: absolute; 
    color:$color2; 
    background: $color1; 
    padding: 10px; 
    right: 0; 
    left: 0; 
    bottom: 0; 
    p{ 
    font-size: 10px; 
    } 
}