Modal - Screen Flickers on Open and Hide #8768

r1c4r60 · 2013-07-29T11:29:20Z

Anyone else?

cvrebert · 2013-07-29T11:33:12Z

What browser and OS?

r1c4r60 · 2013-07-29T11:33:20Z

can be verified at: http://twbs.github.io/bootstrap/javascript/#myModal

Chrome: Version 28.0.1500.71
Mac: 10.6.8

leeaston · 2013-07-29T11:52:25Z

Doesn't flicker for me and I'm using Chrome: Version 28.0.1500.71 and Mac: 10.8.4.

ghost · 2013-07-29T11:55:08Z

Do you mean when you open the model the screen shifts for a second?

As whats happening when you open the model you get 2 scroll bars for a seconds and when closing you lose the scroll bar for a second.

Chrome: Version 28.0.1500.71
Windows 8

kukac7 · 2013-07-29T12:15:52Z

maybe this is what?
when we open the left side there?

http://www.screenr.com/arpH

chrome 30.0.1573.2 dev-m
windows 7

r1c4r60 · 2013-07-29T12:32:12Z

@kukac7 I noticed 3 things:

1 - When the Modal shows - the parent document's indent shifts right. On close it shifts back.
2 - Flickering can be repeated with Safari as well - probably something to do with the item 1.
3 - On Mac + Chrome - While the flicker happens, at times, chrome will become "translucent" for an instant and you will be able to see any windows behind it.

cvrebert · 2013-07-30T02:18:36Z

@r1c4r60 Pretty sure (3) is a general Chrome bug. I've experienced it several times recently on various sites.

andrelom · 2013-07-30T14:22:30Z

Flicker for me and I'm using Chrome: 28.0.1500.72 m (Windows 7).
For a few seconds the scrollbar is duplicated, during the opening.
I think this may be causing the problem.

aoldf2 · 2013-08-01T18:49:22Z

It does it for me with Windows7/Firefox 22.0 also.

Marcpepe · 2013-08-01T20:54:09Z

I'm having the same "flicker" effect on Chrome 28.0.1500.95 and Firefox 22 (on Windows 8).

What I'm seeing is :

On http://getbootstrap.com/javascript/ : main page scrollbar is replaced by modal scrollbar (with a slight overlap (2 scrollbars) during css transition)

On my site : the scrollbar disappears (because my Modal has no overflow), but the scrollbar of the page reappears only if the modal is hidden using data-dismiss="modal", and NOT if calling the "hide" method, or for instance :

$(this).on('hidden.bs.modal', function() {
                // do stuff
        $(this).remove();
    }
}).modal('hide');

What happens then is that my page is stuck : I'm unable to scroll up or down...

I'm new to Github, hope that helps!

Merg1255 · 2013-08-02T16:51:09Z

This does happen on Vista FF22.

krasnoperov · 2013-08-02T21:27:36Z

As far I understand, everyone must have this issue. It is not browser specific.

Screen flickers during animated Modal opening/hiding because of double scrollbars:

First scrollbar for body - it is not hidden yet.
Second scrollbar for modal - it is shown already.

timeinfeldt · 2013-08-05T16:21:44Z

The problem occurs on OSX if you don't have the iOS-style scrollbars activated. The iOS-style scrollbars overlay the page instead of indenting it, so the issue is not visible. But in OS/Browser environments that use 'static' scrollbars you get the issue as seen in the screenshot by @andrelom.

A possible solution (Facebook does this, for example):

use .modal-open to set the container behind the modal to position:fixed (this kills the scrollbar)
set the top value of the container behind the modal to -{{scrollTop}} (this keeps the container at its previous scroll position)

It's not what you would call pretty. It's also not ideal for Bootstrap because it requires a specific HTML setup.

I'm very curious to see if/how this gets solved. This issue makes opening and closing of modals pretty whack on affected systems.

FabianKoestring · 2013-08-06T08:45:28Z

It doesnt fix the issue for me. Working on Windows 7 with Chrome 28.0.15000.95 m.

krasnoperov · 2013-08-06T09:00:33Z

If you want quick solution until official fix:

At first, define several styles:

// Show scroll for modal only when modal is opened
.modal {
  overflow-y: hidden; 
}
.modal-open .modal {
  overflow-y: scroll;      
}

// Fix page shift when body scroll is killed
.modal-open .modal-shiftfix,
.modal-open .modal-shiftfix .navbar-fixed-top,
.modal-open .modal-shiftfix .navbar-fixed-bottom {
  overflow-y: scroll;      
}

Then wrap entire page into .modal-shiftfix div

<body>
  <div class="modal-shiftfix">
  .....
  </div>
</body>

P.S. Tested in Chome/Firefox/Safari for Mac and IE8/Opera for Windows

Merg1255 · 2013-08-14T10:27:41Z

#9419

Mediarts · 2013-08-26T17:52:07Z

I noticed that it happened to add 15pixel margin on the right... not sure why, but I added this as a custom style, and no more issues with the shifting.

The first set fixes the issue with the body shifting over, the second corrects the navbar from shifting, obviously you only need the second if you are making use of the navbar.

body.modal-open{
margin-right:0px!important;
}

.modal-open .navbar-fixed-top{
margin-right:0px!important;
}

IsaiahvH · 2013-08-30T15:17:16Z

I'm not sure whether it helps you, but I'm also using Chrome (29.0.1547.62) on a Mac (10.7.5) and I don't have 'double scrollbars' or anything like that, but rather when the modal showing animation has finished, it flickers once.
Also when the closing animation has finished, it flickers once (so for 0.1 second, I can see the modal again in the middle of the screen, which just finished it's closing animation).

hlship · 2013-09-03T21:33:35Z

Ditto here, seeing it on Mac w/ Chrome 29.0.1547.65.

cvrebert · 2013-09-03T22:32:09Z

The 15px shift is covered by #9855.

Arguseye · 2013-09-04T02:40:50Z

add 15px margin-right lead to the issue any case, so we need to determine document hasn't scroll?i try it

// Show no-scroll for modal only when modal is opened
body.modal-open-noscroll {
margin-right: 0!important;
overflow: hidden;
}
.modal-open-noscroll .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
margin-right: 0!important;
}

$(document).ready(function(){
$('#container-modal').on('show.bs.modal', function () {
if(!isScroll().scrollY){
// no-scroll
$('body').addClass("modal-open-noscroll");
}else {
$('body').removeClass("modal-open-noscroll");
}
})
})

IsaiahvH · 2013-09-04T19:04:35Z

But just to be clear, since @cvrebert 's response didn't seem appropriate to @hlship 's and mine response,
I don't have the 15px-shifting issue, but a 'flicker' issue (see my comment)

hlship · 2013-09-04T20:08:16Z

I'm in the process of uploading a video to vimeo that captures the flicker. It's be a bit before it is ready.

cvrebert · 2013-09-04T20:28:37Z

@hlship Please open a new issue, because this issue is basically about the scrollbar problem.

hlship · 2013-09-04T20:46:38Z

Here's that video; it's more visible when I close the dialog.

https://vimeo.com/73808307

hlship · 2013-09-04T20:47:29Z

Ok, I'll open a new issue.

astrotim · 2013-10-18T23:58:11Z

I'm having this issue on Win7 and OS X 10.8.5 in all browsers.

Quick fix:

.modal-open {
  overflow: hidden;
  position: relative;
  left: -8px;
}

Tested OK in Win7: IE10, FF24, Chrome30; OSX: Chrome30, Safari6, FF24

kingster996 · 2013-10-21T08:52:37Z

Only tested on Mac OSX 10.8.5 Chrome 30 & Safari 6, but this sorted it for me:

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
  margin-right: 0;
}

andrewnleon · 2013-10-22T18:34:31Z

Yeah iv tried all of the above and here is my quick fix. Adjust the width to 99% seems to make everything stay still.

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
margin-right: 0!important;
width:99%!important;
}

Also try adding this class and adjust to your media queries.

IsaiahvH · 2013-10-23T08:55:44Z

I can confirm @kingster996 's fix, it works.
This looks more relevant (since it's all about the margin-right) and neater than @andrewnleon 's fix, because it doesn't have to resort to !important, or changing the width of elements including the body.

andrewnleon · 2013-10-23T13:46:35Z

I used important to just make sure it's overriding the other class in bootstrap. I have tried kingsters suggestion but my body is pushed every time i hit the modal button and its really annoying. Applying a percentage width made everything stable.

IsaiahvH · 2013-10-26T09:58:48Z

Oh, I now see that kingster's suggestion does the opposite in Mozilla Firefox for example, it shifts to the left...

tejawat · 2014-01-09T09:21:28Z

@krasnoperov Thanks buddy... It worked for me....

r1c4r60 closed this as completed Jul 29, 2013

r1c4r60 reopened this Jul 29, 2013

krasnoperov mentioned this issue Aug 2, 2013

Fixed #8768: Modal - Screen Flickers on Open and Hide #9021

Closed

krasnoperov mentioned this issue Aug 4, 2013

Fixed double scroll and page shift when Modal opens. #9069

Closed

FabianKoestring mentioned this issue Aug 6, 2013

Page fluctuate when modal open and close #9153

Closed

This was referenced Aug 9, 2013

modal window adds second scroll bar and then removes it causing webpage to jump #9306

Closed

WIP: Bootstrap 3 #6342

Merged

cvrebert mentioned this issue Aug 15, 2013

Modal window has y-scroll during init #9570

Closed

fat added a commit that referenced this issue Aug 17, 2013

fix for #8768

5e89f71

fat closed this as completed Aug 17, 2013

mdo mentioned this issue Aug 17, 2013

Modal dialog shifts main content of page to right #9494

Closed

twbs locked and limited conversation to collaborators Jun 14, 2014

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modal - Screen Flickers on Open and Hide #8768

Modal - Screen Flickers on Open and Hide #8768

r1c4r60 commented Jul 29, 2013

cvrebert commented Jul 29, 2013

r1c4r60 commented Jul 29, 2013

leeaston commented Jul 29, 2013

ghost commented Jul 29, 2013

kukac7 commented Jul 29, 2013

r1c4r60 commented Jul 29, 2013

cvrebert commented Jul 30, 2013

andrelom commented Jul 30, 2013

aoldf2 commented Aug 1, 2013

Marcpepe commented Aug 1, 2013

Merg1255 commented Aug 2, 2013

krasnoperov commented Aug 2, 2013

timeinfeldt commented Aug 5, 2013

FabianKoestring commented Aug 6, 2013

krasnoperov commented Aug 6, 2013

Merg1255 commented Aug 14, 2013

Mediarts commented Aug 26, 2013

IsaiahvH commented Aug 30, 2013

hlship commented Sep 3, 2013

cvrebert commented Sep 3, 2013

Arguseye commented Sep 4, 2013

IsaiahvH commented Sep 4, 2013

hlship commented Sep 4, 2013

cvrebert commented Sep 4, 2013

hlship commented Sep 4, 2013

hlship commented Sep 4, 2013

astrotim commented Oct 18, 2013

kingster996 commented Oct 21, 2013

andrewnleon commented Oct 22, 2013

IsaiahvH commented Oct 23, 2013

andrewnleon commented Oct 23, 2013

IsaiahvH commented Oct 26, 2013

tejawat commented Jan 9, 2014

Modal - Screen Flickers on Open and Hide #8768

Modal - Screen Flickers on Open and Hide #8768

Comments

r1c4r60 commented Jul 29, 2013

cvrebert commented Jul 29, 2013

r1c4r60 commented Jul 29, 2013

leeaston commented Jul 29, 2013

ghost commented Jul 29, 2013

kukac7 commented Jul 29, 2013

r1c4r60 commented Jul 29, 2013

cvrebert commented Jul 30, 2013

andrelom commented Jul 30, 2013

aoldf2 commented Aug 1, 2013

Marcpepe commented Aug 1, 2013

Merg1255 commented Aug 2, 2013

krasnoperov commented Aug 2, 2013

timeinfeldt commented Aug 5, 2013

FabianKoestring commented Aug 6, 2013

krasnoperov commented Aug 6, 2013

Merg1255 commented Aug 14, 2013

Mediarts commented Aug 26, 2013

IsaiahvH commented Aug 30, 2013

hlship commented Sep 3, 2013

cvrebert commented Sep 3, 2013

Arguseye commented Sep 4, 2013

IsaiahvH commented Sep 4, 2013

hlship commented Sep 4, 2013

cvrebert commented Sep 4, 2013

hlship commented Sep 4, 2013

hlship commented Sep 4, 2013

astrotim commented Oct 18, 2013

kingster996 commented Oct 21, 2013

andrewnleon commented Oct 22, 2013

IsaiahvH commented Oct 23, 2013

andrewnleon commented Oct 23, 2013

IsaiahvH commented Oct 26, 2013

tejawat commented Jan 9, 2014