Twitter bootstrap modal hidden / snipped by google chrome

[r0mdau]

Twitter bootstrap modal hidden / snipped by google chrome

[mikegreiling]

It appears to work fine in Safari 8 and Chrome 41. Which browser are you having trouble with?

[r0mdau]

Chrome Version 41.0.2272.76 (64-bit)

Same problem using Chrome on Debian linux or chromium browser and Chrome on Widonws 7 64bit.

Screenshot : http://www.romaindauby.fr/export.png

[mikegreiling]

Strange. I'm running the exact same version of Chrome on OSX and I cannot replicate the issue. I'll have to check it out again next time I'm near a windows machine.

[r0mdau]

I have the same problem using Chrome on MacBookPro

[th0th]

I have the very same issue on Mac OS X 10.10.2, Google Chrome 41.0.2272.101. Can't reproduce in Mozilla Firefox.

Problem seems to go away when I override the z-index property of element div.parallax-mirror with a non-negative value (for example 0).

Adding a screenshot just for reference: http://i.imgur.com/KMzgJdU.png

[SaltTank]

Hey th0th thanks for the hint. Just tried to reset the zIndex in the parallax JS and it works fine. Are you aware of any unwanted impacts besides not being able to layer in the negative values?

[th0th]

@SaltTank Glad it helped. In my case, the div element after the .parallax-window was messed (it was under the parallax image i used). I had to set position: relative; z-index: 2; to get it over parallax image.

[IsaacNeal]

@th0th & @SaltTank Seems that for me this fixed the issue, but it also introduced another. Content inside the parallax window now does not show. Did you have this problem at all @SaltTank?

[IsaacNeal]

@th0th & @SaltTank I figured it out. Thanks @th0th.

I actually had to implement both of your solutions. Changing the zIndex value to 0 allows the modal to stack on top, and setting position:relative and z-index:2 made the element inside the parallax window stack on top.

[r0mdau]

@IsaacNeal Can you be more precise of which z-index you set to 0 and wich position:relative and z-index:2 you set ?

Thanks.

[IsaacNeal]

@r0mdau in parallax.js search for "parallax-mirror". The first bit of code you will find is:
addClass("parallax-mirror").css({visibility:"hidden",zIndex:-100,position:"fixed",top:0,left:0,overflow:"hidden"})

Change -100 to 0 for the zIndex.

The elements you need to set to relative position and z-index 2 are any elements you want to display content inside of .parallax-window.

In my case, I have a div with class .content-wrapper inside the .paralax-window. Your's would obviously be something different.

[r0mdau]

@IsaacNeal ok thank you ;)

[wstoettinger]

closed antiquated issue for cleanup. if this is still rellevant, feel free to reopen.