Bootstrap Modal causing background images to jump

[brandonw6890098]

I've set some links to open up a modal window on click but when the modal window closes I noticed the background image of the page "jumps" a bit.  The image grows slightly then goes back to original shape.  Really strange, I'm using the built-in Bootstrap Modal class to open the window.

To replicate:

1. URL:Supreme - VISION
2. Click on a right side bar item http://prntscr.com/fzb8xn
3. Then close the window and you'll see the background move slightly http://prntscr.com/fzb9qf

Could the movement be caused by the modal class telling the browser to remove scrolling then once the modal is closed the scrollbars reappear making it look like the image is shifting, or some type of overflow setting on the modal class perhaps?

Here's what I have:

.modal {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 1050;

  display: none;

  overflow: hidden;

  -webkit-overflow-scrolling: touch;

  outline: 0;

}

.modal.fade .modal-dialog {

  -webkit-transition: -webkit-transform .3s ease-out;

       -o-transition:      -o-transform .3s ease-out;

          transition:         transform .3s ease-out;

  -webkit-transform: translate(0, -25%);

      -ms-transform: translate(0, -25%);

       -o-transform: translate(0, -25%);

          transform: translate(0, -25%);

}

.modal.in .modal-dialog {

  -webkit-transform: translate(0, 0);

      -ms-transform: translate(0, 0);

       -o-transform: translate(0, 0);

          transform: translate(0, 0);

}

.modal-open .modal {

  overflow-x: hidden;

  overflow-y: auto;

}

.modal-dialog {

  position: relative;

  width: auto;

  margin: 10px;

}

.modal-content {

  position: relative;

  background-color: #fff;

  -webkit-background-clip: padding-box;

          background-clip: padding-box;

  border: 1px solid #999;

  border: 1px solid rgba(0, 0, 0, .2);

  border-radius: 6px;

  outline: 0;

  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

  margin-left: auto;

  margin-right: auto;

  margin-top: 200px;

  width: 40%;

  height: auto;

}

.modal-content-pic {

  position: relative;

  background-color: #fff;

  -webkit-background-clip: padding-box;

          background-clip: padding-box;

  border: 1px solid #999;

  border: 1px solid rgba(0, 0, 0, .2);

  border-radius: 6px;

  outline: 0;

  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

  margin-left: auto;

  margin-right: auto;

  margin-top: 20px;

  width: 70%;

  height: auto;

}

.modal-backdrop {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 1040;

  background-color: #000;

}

.modal-backdrop.fade {

  filter: alpha(opacity=0);

  opacity: 0;

}

.modal-backdrop.in {

  filter: alpha(opacity=50);

  opacity: .5;

}

.modal-header {

  padding: 15px;

  border-bottom: 1px solid #e5e5e5;

}

.modal-header .close {

  margin-top: -2px;

}

.modal-title {

  margin: 0;

  line-height: 1.42857143;

}

.modal-body {

  position: relative;

  padding: 25px;

  overflow: auto;

}

.modal-footer {

  padding: 15px;

  text-align: right;

  border-top: 1px solid #e5e5e5;

}

.modal-footer .btn + .btn {

  margin-bottom: 0;

  margin-left: 5px;

}

.modal-footer .btn-group .btn + .btn {

  margin-left: -1px;

}

.modal-footer .btn-block + .btn-block {

  margin-left: 0;

}

.modal-scrollbar-measure {

  position: absolute;

  top: -9999px;

  width: 50px;

  height: 50px;

  overflow: scroll;

}

Frank

[Nancy OShea]

Alll I see is the appearance of the browser's vertical scrollbar.  Your images are not doing anything unusual.  

Nancy

[brandonw6890098]

Thanks for your reply.  It seems to do it for higher screen resolutions, I'm at 4k  3840 x 2160.  The images themselves are at 3840 x 2160 and I'm guessing because it's responsive it's scaling automatically to accommodate the lack of scrollbars perhaps that's why it's only affecting higher resolutions...

[Nancy OShea]

You might want to disable Fancybox and the Parallax to see if that makes any difference.

[brandonw6890098]

Ok, I've tried removing the parallax and fancybox js but doesn't appear to have fixed it. The shift still occurs even when I resize the browser window to test so it doesn't appear to be a screen resolution issue either.

[Nancy OShea]

Before:

With Modal:

[BenPleysier]

I get the little jog all of the time. It used to be even worse in older versions of Bootstrap. Now that I have started using Bootstrap 4, the effect is still there.

Funnily, I have had no complaints about this, because the viewer is focussed on the resulting image rather than on background movements.

You spoke of your image. I checked the file size of the background image, showing a grand total of 4.74 MB. I then decided to to a bit of fiddling with that size, the result is an 80% reduction in size. Please spot the difference.

• original image
• optimized image

Here is a handy utility: Reduce Image File Size, Compress JPEG and PNG Images Online | ImageSmaller

[brandonw6890098]

Thanks for your reply Ben.  Ya at first I didn't notice it and it doesn't jump on smaller monitors but it does when I reduce the size of my browser window to mimic smaller resolutions strangely enough.

You're saying the little skip is normal in BS?

ps. Ya the image is a bit larger than usual, I was having some anti-aliasing issues with non-standard screen sizes due to the responsive nature of the images, so I saved them at max quality. I'll be optimizing them further once the site is complete, thanks.

Update:  The simplest fix I found to not have the images move was to add the following CSS... it's not perfect but makes it less obvious. Apparently it's a known issue.

.modal {
overflow-y: auto;
}

.modal-open {
overflow: auto;


}

Frank

[osgood_]

brandonw6890098  wrote

Update:  The simplest fix I found to not have the images move was to add the following CSS... it's not perfect but makes it less obvious. Apparently it's a known issue.

.modal {
overflow-y: auto;
}

.modal-open {
overflow: auto;


}

Frank

That just causes the text box on the page to jump and is even more noticable and annoying.

Build one that works as you want it to work, with less html code to boot.

Here's the html code (yes that's all you need). The images are pulled in to just the 1 modal overlay using jQuery and the link attributes.

<div class="page-overlay">

<div class="lightbox-wrapper">

<div class="lightbox-content">

<p class="close-lightbox">X</p>

<div class="append-content">

</div>

<!-- end append-content -->

<button type="button" class="btn btn-default close-overlay">Close</button>

</div>

<!-- end lightbox-content -->

</div>

<!-- end lightbox-wrapper -->

</div>

<!-- end page-overlay -->

Here's the jQuery for the modal window.

<script>

$(document).ready(function(){

$('.page-overlay, .lightbox-wrapper').hide();

$('a').click(function(){

var imgBig = $(this).attr('img');

var caption = $(this).attr('cap');

$('.append-content').html('<h4>' + caption +'</h4>' + '<img src="' + imgBig +'" alt="">');

$('.page-overlay').fadeIn();

$('.lightbox-wrapper').slideDown();

return: false;

});

$('.close-lightbox, .close-overlay').css('cursor','pointer').click(function() {

$('.page-overlay').fadeOut();

$('.lightbox-wrapper').slideUp();

});

});

</script>

Here's the css:

.page-overlay{

position:fixed;

left: 0px;

top: 0px;

height: 100%;

width:100%;

background: rgba(0, 0, 0, 0.5);

z-index: 200;

}

.lightbox-wrapper {

height: 100%;

width: 70%;

margin: 0 auto;

}

.lightbox-content {

position: relative;

top: 50%;

transform: translateY(-50%);

background-color: #fff;

text-align: center;

border-radius: 7px;

padding: 25px;

-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);

-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);

overflow: hidden;

}

.lightbox-content img {

max-width: 100%;

height: auto;

}

.close-lightbox {

position: absolute;

right: 25px;

top: 15px;

padding: 10px 0 10px 0;

margin: 0;

color: #AFAFAF;

}

.append-content h4 {

padding: 0 0 25px 0;

margin: 0;

font-weight: 400;

}

@media only screen and (max-width : 768px) {

#lightbox-wrapper {

width: 90%;

margin: 0 auto;

}

}

.btn-default {

float: right;

margin: 20px 0 0 0;

background: rgba(0, 0, 0, 0.2);

}

.btn-default:hover {

background: #FF864C;

color: #fff;

}

Here is your Black Vision link:

<li><a href="#" title="Black" cap="Black Vision" img="http://www.supremem.com/new_2017/images/products/vision/vision_blk.jpg"><img src="images/products/vision/vision_black.jpg" alt="Black" width="60" height="43" class="img-responsive"/></a></span></li>

Other links will follow the same code patttern:

<li><a href="#" title="Charcoal" cap="Charcoal" img="http://www.supremem.com/new_2017/images/products/charcoal.jpg"><img src="images/products/vision/vision_black.jpg" alt="Black" width="60" height="43" class="img-responsive"/></a></span></li>

[brandonw6890098 · Accepted solution]

Osgood,

Wow, thanks for the detailed explanation.  I'll give that a shot and see how it goes, I guess this is one of those strange things about BS, it's not the end of the world and doesn't affect everyone but I know it's there and just annoying as hell.  Really appreciate the help.

UPDATE: found this solution that seems to be simple and worked:

.modal-open {

  padding-right: 0 !important;

}

html {

  overflow-y: scroll !important;

}

Seems simple enough workaround but what a pain to have to do, I see what you mean by all the little quirks in BS.

[osgood_]

brandonw6890098  wrote

}Seems simple enough workaround but what a pain to have to do, I see what you mean by all the little quirks in BS.

Its good to know that there is a simple work-around, I would have thought that the Bootstrap 'experts' in the forum could have helped you out but they are obviously not as familar with Bootstrap as they should be given they use it as their main weapon.

The reason I prefer not to use a frameworks is because they are littered with little quirks such as this and for the more discerning its unacceptable. What time a framework is supposedly meant to save is negated by all the time spent trying to find out the cause of the quirks.

[BenPleysier]

Actually, I haven't found it to be a problem. But if you need a workaround, all you need to do is add the following script

$('#mediaModal').bind('hidden.bs.modal', function () {

     $("html").css("margin-right", "0px");

});

$('#mediaModal').bind('show.bs.modal', function () {

     $("html").css("margin-right", "-16px");

});

where #mediaModal is the ID of the modal.

To see the difference:

• with background jog
• no background jog

[brandonw6890098]

Thanks Ben, have you tried this CSS, not sure if it'll work for your case but worked for me:

.modal-open {

  padding-right: 0 !important;

}

html {

  overflow-y: scroll !important;

}

[BenPleysier]

Thank you, I saw your previous reply and sure that works.

As I have stated, I have had no negative feedback from my clients and it did not bother me, hence I have not sought a solution.

The thing that irks me is that the smart fart thinks that it knows it all and resorts to sprouting nonsense.

[osgood_]

BenPleysier  wrote

The thing that irks me is that the smart fart thinks that it knows it all and resorts to sprouting nonsense.

Sadly you are in denial as usual. No nonsense going on here, that is all in your own head. Its a bit late now to be posting solutions which you have only just found out via Googling. As a so called Bootstrap expert you surely should have known that.

[Luffy_D_Monkey]

brandonw6890098

REALLY THANK YOU !