For some reason, my Twitter Bootstrap modals don't seem to be working correctly. On a long page, the modal doesn't stay fixed on the screen - and is instead displayed at the top of the page.
The modals are displaying at the top instead of staying on-screen and fixed.
I hope this makes sense, and someone might know what's going wrong here. Something in the wrong place, something missing possibly?
This probleme should be only in webkit browsers, cause in core.css you have added
body {
-webkit-transform: rotate(0deg);
}
If you remove this, everything should be fine.
Related
I am using angular 1 and angular material aswell. I want to use md-subheader with multiples md-virtual-repeat-container within a ng-repeat. You can find the source code on this codepen.
The problem right now is kind of tricky to explain. First of all you must resize the viewport so that the height is smaller than a full container.
Let's say i reach the end of 1 section. 2 section should appear and while scrolling, go to the top of the screen and replace the 1 section subheader (demo here). This is working properly as long as you're scrolling on the 1 section container, but as soon as your mouse reaches the 2 section container, it scrolls within it and the 1 section container still appears on the top of the screen.
Here is a Video to show you. First I scroll on the top content, then i scroll on the subheader and it goes up, then I scroll in the second content and the subheader doesn't move up, which it should do. (Try scrolling in the second content in the angular demo link).
I am aware the codepen provided as another bug within it (I don't have it on my sources, but it randomly appeared on the codepen..), which looks kind of like an infinite scroll but you can use the slider on the right to scroll slowly and you'll understand what I mean. This is not the bug I'm trying to solve with this issue.
The html is pretty straight forward, since it's just a mock pattern to reproduce the bug I have on my app.
<section ng-repeat="title in vm.dataset">
<md-subheader>{{$index + 1}} Section</md-subheader>
<md-virtual-repeat-container>
<p md-virtual-repeat="item in vm.dataset" md-on-demand="{{vm.onDemand}}">{{item.value}}</p>
</md-virtual-repeat-container>
</section>
I believe the problem has something to do with the fact that you have to specify a height for virtual repeaters containers in order to work. This implementation would work perfectly with normal ng-repeat.
There is a dynamic css adding transform: translateY(n) !important;
to .md-virtual-repeat-offsetter, n value depends on the scroll.
So easily the solution is to stop this behavior by adding:
.md-virtual-repeat-container .md-virtual-repeat-offsetter {
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
Check the updated CodePen.
Hope this helps :)
I am working with Bootstrap 3.3.1 modals and it was working perfectly until yesterday.
I'm using some modal windows on my page.
One of those modals is more long than the page. In a normal time, Bootstrap transparently hides the body's scrollbar and creates a scrollbar on the overlay. When the user scrolls on the modal, it is stopped when it reach the end. And the body doesn't moves at all.
But, yesterday, I was working on my modals and now it is completely buggy. I have no idea of the thing I introduced that destructs my modals.
First, Bootstrap applies an offset of 15px on the body, even on the small modals that have a height inferior to the screen height.
The content is uselessly shifted.
Second, the body keeps its scrollbar when a modal is displayed. And the overlay also have its scrollbar. So, I have an hideous double scrollbar on my page, and when the user scrolls at the end of the modal, the body scrolls too.
Also, sometimes (yes), the overlay is buggy and it scrolls with the body (so I can see the body without overlay at the bottom of the page).
I have no idea of what can cause this problem since it was working before.
Edit: Here is my code : http://pastebin.com/ePAcjri8. The position of the modals in the page has no effects on this bug (just after <body>, juste before </body>, etc).
I fill the modal content via Ajax when shown.
On JavaScript side, I'm just using .modal('show') then .html(html) to fill them.
Problem solved.
I think this issue can be caused by a lot of different reasons (see topics about this problem on the Internet, but alot have been fixed in Bootstrap releases), but in my case, I just had to remove this in my CSS:
html {
overflow-x: hidden;
}
Hiding the x or y overflow in <html> can cause the apparition of the double scrollbar.
I'm trying to create a parallax website. But then I have an issue with fixed positioning.
I have several sections , each with a background-attachment:fixed.
A position:fixed menu bar on the top with an hidden element in it on top of all sections.
A google map 100% with in one of the sections.
Now, the problem is when I scroll the page with animation in google chrome, the scrolling does not go smooth and it flashes several times while scrolling.
I do the scrolling with greensock scrollTo plugin , but that is not the problem as I also tested it with jquery .animate() method. Same result.
I did a research , and found out that chrome has a bug or problem with Fixed positioning ( and sometimes when you put hidden element in it )
Some pages suggested to use these two with the fixed elements :
-webkit-backface-visibility:hidden;
-webkit-transform: translateZ(0);
I added this to the fixed menu and some of the choppy behavior of it reduced , but still not smooth.
If I add this to the sections with background-attachment:fixed elements, the scrolling animation goes smooth but does not act as fixed anymore.
Somebodies says that chrome has problem with large images, some says it has issue with fixed position and somebodies had a solution that did not work for me :D
I uploaded the page :
http://www.FarzanMohajerani.com/test/parallax
just click anywhere on the page to scroll.
I also created a jsFiddle with the exact same code. But I don't know why it doesn't have the problem in jsFiddle :
http://jsfiddle.net/Farzanmc/cRqxT/5/
It would be great if anyone could direct me to the right solution or remind me if I'm doing anything wrong.
Thanks
This solved the issue for me:
-webkit-transform: translate3d(0,0,0);
Adding this rule turns the element into a layer in Chrome, which avoids repainting. In my unique situation the error was caused by browser re-painting.
I', having the same problem with Chrome at the moment and I narrowed down the cause to the following combination:
1) background: fixed;
2) transform: (any transform, even just putting scale(1), would instantly break it).
As long as an element that contains fixed background image doesn't have any "transform" on it, it works fine. But as soon as you even add "transform: scale(1);" which doesn't actually make any real transformation, it completely breaks the fixed background image. You can start scrolling, but it disappears. If it was outside of the screen, it will never appear at all, no matter how far you scroll.
So essentially, the problem is that Chrome at the moment can't handle fixed background images in transformed elements. No matter which level of descendent or ancestor we are talking about.
The thing is, this is pretty much an essential stuff that and I'm really hoping that it gets fixed as soon as possible, because it's extremely limiting. You can't disregard Chrome as if it's IE6.
And you can't apply "position: fixed;" on an "img" element, because it will be fixed to the first "transformed" ancestor, not to the real screen, since that's apparently how it's supposed to be treated, according to W3C. Although, some new value would be welcomed, some that can break all the way to the very window, and fixit to those coordinates.
I ran i to a same problem and fixed it this way:
I had to deal with fixed header on a website and anytime i would scroll with a mouse wheel the header would get choppy.... I had a display:none element in a header and as soon as i removed the element, header became fixed and steady, now it displays well no matter how fast i scroll.
I'm experiencing an extremely weird behavior when using Twitter Bootstrap's affix plugin, fixed navbar, and anchor links together. I'm going to attempt to explain my problem but it's kind of difficult to put into words, so please forgive me if I'm not the clearest.
I have a navbar-fixed-top at the top of my page. Under that I have a .container div. Inside there I have two div.spans (span4 and span8). Inside span4 is a div.well that has the affix-top class applied to it (so it gets a fixed position and "sticks" where it's at). Inside my span8 I have a bunch of content.
Inside the well div there is a nav-list. This list gets populated with li/a elements based on items in the span8 (I have a little script that does this). The links are anchors, so they point to elements on the page (#myId, #myIdTwo, etc). All this works wonderfully. My list is there, the links are clickable, they take me to my elements. Great.
However, not great. Sometimes, when I click one of the links, I go to my anchor in the span8 but the page doesn't seem to refresh properly. I sometimes see strange white "boxes". Or the content inside the span will show partly above the fixed nav-header. Sometimes half of the nav-list disappears.. but then comes back (sort-of) if I move my mouse around it. Like you used to see in some old Windows applications that were getting bogged down.
You can see for yourself here: http://jaylach.github.com/lutra. You may need to click some of the nav links a few times before you see the issue.
I've been struggling with this all day and I cannot, for the life of me, figure it out. I've taken out the affixes, I've taken out the fixed top navbar, I've taken out my z-index. I just can't seem to figure it out.
Does anyone, anywhere, have any clue as to what could be causing this? I would really appreciate any advice you guys could give.
Many thanks in advance!!
This is a WebKit bug.
add -webkit-transform: scale3d(1,1,1); to both .navbar-fixed-top and .affix
both styles are defined in bootstrap.min.css. So override these 2 styles in your main.css as:
.affix,.navbar-fixed-top {
-webkit-transform: scale3d(1,1,1);
}
I have a unique situation, instead of doing a modal to display some options I'm trying to use some 3D transforms to have a "flipping" motion which shows some inputs on the "back" of a view.
I have created a codepen to show the functionality as well as the issue.
The issue is when I flip over the div the bottom half of my back-facing form is not clickable, almost like it has some element on top of it that I can't see. It is exactly the bottom 50% that is not editable so I'm guessing something with how I'm doing my rotation is wrong.
http://codepen.io/CollinEstes/pen/qcwhd
I was able to fix your example: http://codepen.io/MikeFielden/pen/haHrG
All I ended up doing was change your rotateX(180deg) to rotateX(-180deg) and that appears to clear it up. As for why its doing this I cannot say. A browser bug perhaps?