Skip to content
This repository

Modal - Screen Flickers on Open and Hide #8768

Closed
r1c4r60 opened this Issue · 33 comments

21 participants

Ricardo Rautalahti-Hazan Chris Rebert leeaston Chris Riddell béla André Moraes aoldf2 Marc Merg1255 Aleksei Krasnoperov timeinfeldt Fabian Köstring Mediarts Isaiah van Hunen Howard M. Lewis Ship ShaoNan astrotim Chris King Andrew tejawat Jacob
Ricardo Rautalahti-Hazan

Anyone else?

Ricardo Rautalahti-Hazan r1c4r60 closed this
Ricardo Rautalahti-Hazan r1c4r60 reopened this
Chris Rebert
Owner

What browser and OS?

Ricardo Rautalahti-Hazan

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

Chrome: Version 28.0.1500.71
Mac: 10.6.8

leeaston

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

Chris Riddell

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

béla
kukac7 commented

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

Ricardo Rautalahti-Hazan

@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.

screen shot 2013-07-29 at 3 31 21 pm

Chris Rebert
Owner

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

André Moraes

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.

duplicate-scrollbars

aoldf2

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

Marc

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

This does happen on Vista FF22.

Aleksei Krasnoperov

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

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.

Fabian Köstring

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

Aleksei Krasnoperov

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

Chris Rebert cvrebert referenced this issue
Merged

WIP: Bootstrap 3 #6342

120 of 126 tasks complete
Jacob fat referenced this issue from a commit
Jacob fat fix for #8768 5e89f71
Jacob fat closed this
Mediarts

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;
}

Isaiah van Hunen

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).

Howard M. Lewis Ship

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

Chris Rebert
Owner

The 15px shift is covered by #9855.

ShaoNan

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");
}
})
})

Isaiah van Hunen

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)

Howard M. Lewis Ship

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

Chris Rebert
Owner

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

Howard M. Lewis Ship

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

https://vimeo.com/73808307

Howard M. Lewis Ship

Ok, I'll open a new issue.

astrotim

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

Chris King

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;
}
Andrew

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.

Isaiah van Hunen

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.

Andrew

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.

Isaiah van Hunen

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

tejawat

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

Chris Rebert cvrebert locked and limited conversation to collaborators
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Something went wrong with that request. Please try again.