Modal image cuted in iOs10 or older and android 5
0
well i have a website for my webcomic. But it has a bug that only appear in iOs 10 or older version, and android 5 (default browser only).
First at all i have to clarify im not the original developer of the site, so Im not really sure how it works completly, but I was a developer long time ago, so I can basically understand codes. I isolated the code of modal (I tested it, so the bug still appearing)
This is the html code
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body style="background-color: blue">
<section>
<article class="links_view" style="color: black;">
<a href="#" id="zoom" class="zoom"><img src="ico-zoom.svg" alt="Ver" class="img-fluid"></a>
</article>
</section>
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Title" aria-hidden="true">
<div id="modal_dialog" class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<img id="imagen_modal" src="img_pag_00002_G.png" alt="" class="img-fluid">
</div>
</div>
</div>
<a href="#" class="close_modal" data-dismiss="modal" aria-label="Close">
<span class="fas fa-times"></span>
</a>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/funciones.js"></script>
</body>
</html>
This is the Css code (estilos.css):
@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Francois+One");
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700");
.modal-dialog{max-width:815px;}
.modal-dialog .modal-content{border-radius:0;}
.modal-dialog.imagen_horizontal{max-width:90%;}
.modal-dialog.imagen_horizontal .modal-content .modal-body{overflow:auto !important;white-space:nowrap !important;}
.modal-dialog.imagen_horizontal .modal-content .modal-body .img-fluid{max-width:none}
//close_modal is a black buttom to close the modal
.close_modal{position:absolute;top:26px;right:26px;}
.close_modal span{background-color:#000;border-radius:50%;color:#fff;font-size:1.1em;padding:11px 14px;-webkit-transition:.5s all;-moz-transition:.5s all;-o-transition:.5s all;-ms-transition:.5s all;transition:.5s all}
.close_modal:hover span{background-color:#fff;color:#000}
@media screen and (max-width:995px){
.modal-dialog .modal-content .modal-body{flex:1 1 100%;overflow:auto;white-space:nowrap;}
.modal-dialog .modal-content .modal-body .img-fluid{max-width:none; }
.modal-dialog.imagen_horizontal{max-width:100%}
.close_modal{position:fixed;top:20px;right:20px;z-index:9999;}
.close_modal:hover span{background-color:rgba(0,0,0,0.8);color:#fff}}
@media screen and (min-width:768px) and (max-width:991px){
.modal-dialog .modal-content .modal-body{flex:1 1 100%;overflow:auto;white-space:nowrap;}
.modal-dialog .modal-content .modal-body .img-fluid{max-width:none}}
@media screen and (min-width:992px) and (max-width:1199px){
.modal-dialog .modal-content .modal-body{flex:1 1 100%;overflow:auto;white-space:nowrap;}
.modal-dialog .modal-content .modal-body .img-fluid{max-width:none}}
// This code was added to fix a another bug with newest ios, but the bug of this topic was already there before
@media screen and (max-width:767px){
#modal1{overflow-y: scroll !important;-webkit-overflow-scrolling: touch !important; no-body-scroll-fix !important;}}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#modal1 {
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch !important;
no-body-scroll-fix !important: ;
}
}
This is the javascript code (funciones.js):
$(document).ready(function(){
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#inicio').addClass("nav_scroll");
else
$('#inicio').removeClass("nav_scroll");
});
//It activates when the scroll is more than 100px
$(window).scroll(function() {
if ($(this).scrollTop() > 225) {
$('a.scroll-top').fadeIn();
} else {
$('a.scroll-top').fadeOut();
}
});
//Create animation when clic the buttom
$('a.scroll-top').click(function() {
$("html, body").animate({scrollTop: 0}, 600);
return false;
});
$('body').on('click', '.page-scroll a', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
//this buttom (zoom=a yellow buttom) show the modal
$('#zoom').click(function() {
$('#modal1').modal('show');
});
});
In the page we have a yellow buttom(called "zoom"), when u clic on it appears a big image, u can scroll it with ur fingers so u can see it all. It should looks like this:
link normal view
But the bug in older ios and android5(default browser) show the image height cuted (but u can scroll it anyway):
link bug view
I hope u can help me with this issue, it's the only thing i need to fix to launch the website.
ios css image modal-dialog bootstrap-modal
asked Nov 22 '18 at 23:49
HatsHats
12
add a comment |
0
well i have a website for my webcomic. But it has a bug that only appear in iOs 10 or older version, and android 5 (default browser only).
First at all i have to clarify im not the original developer of the site, so Im not really sure how it works completly, but I was a developer long time ago, so I can basically understand codes. I isolated the code of modal (I tested it, so the bug still appearing)
This is the html code
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body style="background-color: blue">
<section>
<article class="links_view" style="color: black;">
<a href="#" id="zoom" class="zoom"><img src="ico-zoom.svg" alt="Ver" class="img-fluid"></a>
</article>
</section>
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Title" aria-hidden="true">
<div id="modal_dialog" class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<img id="imagen_modal" src="img_pag_00002_G.png" alt="" class="img-fluid">
</div>
</div>
</div>
<a href="#" class="close_modal" data-dismiss="modal" aria-label="Close">
<span class="fas fa-times"></span>
</a>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/funciones.js"></script>
</body>
</html>
This is the Css code (estilos.css):
@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Francois+One");
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700");
.modal-dialog{max-width:815px;}
.modal-dialog .modal-content{border-radius:0;}
.modal-dialog.imagen_horizontal{max-width:90%;}
.modal-dialog.imagen_horizontal .modal-content .modal-body{overflow:auto !important;white-space:nowrap !important;}
.modal-dialog.imagen_horizontal .modal-content .modal-body .img-fluid{max-width:none}
//close_modal is a black buttom to close the modal
.close_modal{position:absolute;top:26px;right:26px;}
.close_modal span{background-color:#000;border-radius:50%;color:#fff;font-size:1.1em;padding:11px 14px;-webkit-transition:.5s all;-moz-transition:.5s all;-o-transition:.5s all;-ms-transition:.5s all;transition:.5s all}
.close_modal:hover span{background-color:#fff;color:#000}
@media screen and (max-width:995px){
.modal-dialog .modal-content .modal-body{flex:1 1 100%;overflow:auto;white-space:nowrap;}
.modal-dialog .modal-content .modal-body .img-fluid{max-width:none; }
.modal-dialog.imagen_horizontal{max-width:100%}
.close_modal{position:fixed;top:20px;right:20px;z-index:9999;}
.close_modal:hover span{background-color:rgba(0,0,0,0.8);color:#fff}}
@media screen and (min-width:768px) and (max-width:991px){
.modal-dialog .modal-content .modal-body{flex:1 1 100%;overflow:auto;white-space:nowrap;}
.modal-dialog .modal-content .modal-body .img-fluid{max-width:none}}
@media screen and (min-width:992px) and (max-width:1199px){
.modal-dialog .modal-content .modal-body{flex:1 1 100%;overflow:auto;white-space:nowrap;}
.modal-dialog .modal-content .modal-body .img-fluid{max-width:none}}
// This code was added to fix a another bug with newest ios, but the bug of this topic was already there before
@media screen and (max-width:767px){
#modal1{overflow-y: scroll !important;-webkit-overflow-scrolling: touch !important; no-body-scroll-fix !important;}}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#modal1 {
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch !important;
no-body-scroll-fix !important: ;
}
}
This is the javascript code (funciones.js):
$(document).ready(function(){
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#inicio').addClass("nav_scroll");
else
$('#inicio').removeClass("nav_scroll");
});
//It activates when the scroll is more than 100px
$(window).scroll(function() {
if ($(this).scrollTop() > 225) {
$('a.scroll-top').fadeIn();
} else {
$('a.scroll-top').fadeOut();
}
});
//Create animation when clic the buttom
$('a.scroll-top').click(function() {
$("html, body").animate({scrollTop: 0}, 600);
return false;
});
$('body').on('click', '.page-scroll a', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
//this buttom (zoom=a yellow buttom) show the modal
$('#zoom').click(function() {
$('#modal1').modal('show');
});
});
In the page we have a yellow buttom(called "zoom"), when u clic on it appears a big image, u can scroll it with ur fingers so u can see it all. It should looks like this:
link normal view
But the bug in older ios and android5(default browser) show the image height cuted (but u can scroll it anyway):
link bug view
I hope u can help me with this issue, it's the only thing i need to fix to launch the website.
ios css image modal-dialog bootstrap-modal
asked Nov 22 '18 at 23:49
HatsHats
12
add a comment |
0
0
0
well i have a website for my webcomic. But it has a bug that only appear in iOs 10 or older version, and android 5 (default browser only).
First at all i have to clarify im not the original developer of the site, so Im not really sure how it works completly, but I was a developer long time ago, so I can basically understand codes. I isolated the code of modal (I tested it, so the bug still appearing)
This is the html code
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body style="background-color: blue">
<section>
<article class="links_view" style="color: black;">
<a href="#" id="zoom" class="zoom"><img src="ico-zoom.svg" alt="Ver" class="img-fluid"></a>
</article>
</section>
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Title" aria-hidden="true">
<div id="modal_dialog" class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<img id="imagen_modal" src="img_pag_00002_G.png" alt="" class="img-fluid">
</div>
</div>
</div>
<a href="#" class="close_modal" data-dismiss="modal" aria-label="Close">
<span class="fas fa-times"></span>
</a>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/funciones.js"></script>
</body>
</html>
This is the Css code (estilos.css):
@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Francois+One");
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700");
.modal-dialog{max-width:815px;}
.modal-dialog .modal-content{border-radius:0;}
.modal-dialog.imagen_horizontal{max-width:90%;}
.modal-dialog.imagen_horizontal .modal-content .modal-body{overflow:auto !important;white-space:nowrap !important;}
.modal-dialog.imagen_horizontal .modal-content .modal-body .img-fluid{max-width:none}
//close_modal is a black buttom to close the modal
.close_modal{position:absolute;top:26px;right:26px;}
.close_modal span{background-color:#000;border-radius:50%;color:#fff;font-size:1.1em;padding:11px 14px;-webkit-transition:.5s all;-moz-transition:.5s all;-o-transition:.5s all;-ms-transition:.5s all;transition:.5s all}
.close_modal:hover span{background-color:#fff;color:#000}
@media screen and (max-width:995px){
.modal-dialog .modal-content .modal-body{flex:1 1 100%;overflow:auto;white-space:nowrap;}
.modal-dialog .modal-content .modal-body .img-fluid{max-width:none; }
.modal-dialog.imagen_horizontal{max-width:100%}
.close_modal{position:fixed;top:20px;right:20px;z-index:9999;}
.close_modal:hover span{background-color:rgba(0,0,0,0.8);color:#fff}}
@media screen and (min-width:768px) and (max-width:991px){
.modal-dialog .modal-content .modal-body{flex:1 1 100%;overflow:auto;white-space:nowrap;}
.modal-dialog .modal-content .modal-body .img-fluid{max-width:none}}
@media screen and (min-width:992px) and (max-width:1199px){
.modal-dialog .modal-content .modal-body{flex:1 1 100%;overflow:auto;white-space:nowrap;}
.modal-dialog .modal-content .modal-body .img-fluid{max-width:none}}
// This code was added to fix a another bug with newest ios, but the bug of this topic was already there before
@media screen and (max-width:767px){
#modal1{overflow-y: scroll !important;-webkit-overflow-scrolling: touch !important; no-body-scroll-fix !important;}}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#modal1 {
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch !important;
no-body-scroll-fix !important: ;
}
}
This is the javascript code (funciones.js):
$(document).ready(function(){
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#inicio').addClass("nav_scroll");
else
$('#inicio').removeClass("nav_scroll");
});
//It activates when the scroll is more than 100px
$(window).scroll(function() {
if ($(this).scrollTop() > 225) {
$('a.scroll-top').fadeIn();
} else {
$('a.scroll-top').fadeOut();
}
});
//Create animation when clic the buttom
$('a.scroll-top').click(function() {
$("html, body").animate({scrollTop: 0}, 600);
return false;
});
$('body').on('click', '.page-scroll a', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
//this buttom (zoom=a yellow buttom) show the modal
$('#zoom').click(function() {
$('#modal1').modal('show');
});
});
In the page we have a yellow buttom(called "zoom"), when u clic on it appears a big image, u can scroll it with ur fingers so u can see it all. It should looks like this:
link normal view
But the bug in older ios and android5(default browser) show the image height cuted (but u can scroll it anyway):
link bug view
I hope u can help me with this issue, it's the only thing i need to fix to launch the website.
ios css image modal-dialog bootstrap-modal
asked Nov 22 '18 at 23:49
HatsHats
12
well i have a website for my webcomic. But it has a bug that only appear in iOs 10 or older version, and android 5 (default browser only).
First at all i have to clarify im not the original developer of the site, so Im not really sure how it works completly, but I was a developer long time ago, so I can basically understand codes. I isolated the code of modal (I tested it, so the bug still appearing)
This is the html code
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body style="background-color: blue">
<section>
<article class="links_view" style="color: black;">
<a href="#" id="zoom" class="zoom"><img src="ico-zoom.svg" alt="Ver" class="img-fluid"></a>
</article>
</section>
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Title" aria-hidden="true">
<div id="modal_dialog" class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<img id="imagen_modal" src="img_pag_00002_G.png" alt="" class="img-fluid">
</div>
</div>
</div>
<a href="#" class="close_modal" data-dismiss="modal" aria-label="Close">
<span class="fas fa-times"></span>
</a>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/funciones.js"></script>
</body>
</html>
This is the Css code (estilos.css):
@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Francois+One");
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700");
.modal-dialog{max-width:815px;}
.modal-dialog .modal-content{border-radius:0;}
.modal-dialog.imagen_horizontal{max-width:90%;}
.modal-dialog.imagen_horizontal .modal-content .modal-body{overflow:auto !important;white-space:nowrap !important;}
.modal-dialog.imagen_horizontal .modal-content .modal-body .img-fluid{max-width:none}
//close_modal is a black buttom to close the modal
.close_modal{position:absolute;top:26px;right:26px;}
.close_modal span{background-color:#000;border-radius:50%;color:#fff;font-size:1.1em;padding:11px 14px;-webkit-transition:.5s all;-moz-transition:.5s all;-o-transition:.5s all;-ms-transition:.5s all;transition:.5s all}
.close_modal:hover span{background-color:#fff;color:#000}
@media screen and (max-width:995px){
.modal-dialog .modal-content .modal-body{flex:1 1 100%;overflow:auto;white-space:nowrap;}
.modal-dialog .modal-content .modal-body .img-fluid{max-width:none; }
.modal-dialog.imagen_horizontal{max-width:100%}
.close_modal{position:fixed;top:20px;right:20px;z-index:9999;}
.close_modal:hover span{background-color:rgba(0,0,0,0.8);color:#fff}}
@media screen and (min-width:768px) and (max-width:991px){
.modal-dialog .modal-content .modal-body{flex:1 1 100%;overflow:auto;white-space:nowrap;}
.modal-dialog .modal-content .modal-body .img-fluid{max-width:none}}
@media screen and (min-width:992px) and (max-width:1199px){
.modal-dialog .modal-content .modal-body{flex:1 1 100%;overflow:auto;white-space:nowrap;}
.modal-dialog .modal-content .modal-body .img-fluid{max-width:none}}
// This code was added to fix a another bug with newest ios, but the bug of this topic was already there before
@media screen and (max-width:767px){
#modal1{overflow-y: scroll !important;-webkit-overflow-scrolling: touch !important; no-body-scroll-fix !important;}}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#modal1 {
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch !important;
no-body-scroll-fix !important: ;
}
}
This is the javascript code (funciones.js):
$(document).ready(function(){
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#inicio').addClass("nav_scroll");
else
$('#inicio').removeClass("nav_scroll");
});
//It activates when the scroll is more than 100px
$(window).scroll(function() {
if ($(this).scrollTop() > 225) {
$('a.scroll-top').fadeIn();
} else {
$('a.scroll-top').fadeOut();
}
});
//Create animation when clic the buttom
$('a.scroll-top').click(function() {
$("html, body").animate({scrollTop: 0}, 600);
return false;
});
$('body').on('click', '.page-scroll a', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
//this buttom (zoom=a yellow buttom) show the modal
$('#zoom').click(function() {
$('#modal1').modal('show');
});
});
In the page we have a yellow buttom(called "zoom"), when u clic on it appears a big image, u can scroll it with ur fingers so u can see it all. It should looks like this:
link normal view
But the bug in older ios and android5(default browser) show the image height cuted (but u can scroll it anyway):
link bug view
I hope u can help me with this issue, it's the only thing i need to fix to launch the website.
ios css image modal-dialog bootstrap-modal
ios css image modal-dialog bootstrap-modal
asked Nov 22 '18 at 23:49
HatsHats
12
asked Nov 22 '18 at 23:49
HatsHats
12
edited Nov 22 '18 at 23:55
Hats
asked Nov 22 '18 at 23:49
HatsHats
12
asked Nov 22 '18 at 23:49
HatsHats
12
asked Nov 22 '18 at 23:49
HatsHats
12
12
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53439182%2fmodal-image-cuted-in-ios10-or-older-and-android-5%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53439182%2fmodal-image-cuted-in-ios10-or-older-and-android-5%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
