Up until a forced reboot, my parallax scrolling page was working fine. Now though, a mysterious whitespace is offsetting the sections. It only appears every other section - one section is ok, the next below is offset, etc.
I've checked through the css that styles and positions the parallax sections, but haven't found any margins, padding or other offsets that could be causing the offset.
please have a look here.
Only every second section has parallax. So it’s nothing about being every nth section.
There is a class .parallax__layer--back which has transform: translateZ(-300px) scale(2). When I changed it to translateZ(-295px) scale(2) it filled whole space. The other section has translateZ(-600px) scale (3) and there I had to use -289px. Looks like transform is not working for you how’d you expect.
Related
I have a header, which includes a navigation section and a logo section. I want the logo to align left and the navigation bar to align right. I've initially done this with float left (for logo) and float right (for navbar), but later decided to use "justify-content: space-between;" for the parent element (#header). (This does not change the nature of the problem.)
The problem when loading this with Chrome is that the header loads as if it is gradually expanding from the right and left edges toward the center. I don't see the same problem in Firefox. After loading it once, I cannot immediately replicate the problem, unless I wait for a few minutes or clear my cache and cookies. Here is the url that I'm experimenting at where you can (hopefully) view the problem:
https://www.omerfyalcin.com/experimental/
./style.css to see the style file.
This is pretty annoying since it prevents the transition between pages from looking smooth. Cannot find a solution despite extensive searching.
Thank you very much.
There's no sandbox so i cannot reliably try it but it's definitely related to transition: all 0.4s. There must be some kind of width change or something in the header and transition: all is causing that animation to happen. Make your transition to target more specific behavior.
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've got this weird problem which it seems that i simply can't solve (so far). The weird thing is that I've done almost exactly the same layout before for a navigation-bar, which was succesful.
In my navigation bar i have a button (not an actual <button> but a <div> which acts like one through jquery) to the farthest right of it, which has a background color and expands on click. The problem is that in IE and some resolutions of Chrome as well, there's a little white stripe shown beneath this div. Further this makes the child div that expands beneath it have a little gap between the button in the navigation bar and it self. This might not matter to some people (or most), but it's driving me mad - especially considering that i've done it before and used almost the very same css.
The <div> (to be more precise, it's the "quick-download" div) is set to a height of 70px and line-height of 70px, and the same goes for its siblings (and some of them less). However, the parent div shows up as 70.4px in height, which is bugging me out. I've tried numerous "trial-and-error" solutions/attempts, but with no success at all.
EDIT:
An image of the problem can be seen here (i changed background to red to make it more apparent): http://imgur.com/fya0duQ
EDIT 2:
The white space beneath the quick-download div appears only to be showing in IE and Safari on my compute right now.
EDIT 3:
Link to website is removed as the problem is corrected and therefore no longer is useful.
Assuming you mean the "Quick Download" button...
The height of the navigation bar is 75px and the height of the button is 70px, creating a 5px-tall gap.
The reason your navigation bar is 75px is because your image on the left is 60px tall with margin-top: 15px;. If you want the button to be flush with the bottom of the navigation bar, you can either increase the height of the button, reduce the margin-top of the <img id="aktie-skat-logo" ...>, or reduce the image's height.
The CSS in question:
#aktie-skat-logo {
margin-top: 15px;
display: block;
}
I've actually tracked the problem down my self - however, only after checking the problem across different browsers, after posting in here. The hint came in my old version of safari and IE, and didn't show in Chrome - which is consistent with "EDIT 2" in the original post. I found that some links we're 0.4px higher than others, but only 2/5 links.
The problem apparently stems from inserting a FontAwesome icon using the css ::after selector to links that has "children" (subpages). After removing this or making these icons position:absolute the problem is solved.
As to why insering these using ::after I have no idea. The ::after element had display:inline so shouldn't have broken too much in my opinion.
I'm sorry that I might have wasted your time checking my problem and answering, but even though I found the solution my self, it was a help posting in here (wouldn't have found it otherwise). I hope this might help some other people at some point.
I have been working on a small project for myself to try and experiment with HTML5 and CSS3, to get the hang of it. I need help solving a weird - in my eyes - and unexpected CSS quirk.
I have put my work on CodePen.io to see: http://codepen.io/jbehrens94/pen/uKgvH
The thing is, I want all <section>'s to be 100% in height, so every section fills the exact 100% width and height of the browser's screen. The thing is, if you scroll down to the bottom, there is a lot of white and I can't find out why.
I have noticed margins not working well, so I worked around them, mostly by using paddings.
I tried changing display's, floats and so on, but I just can not seem to find what the problem is and why there is a lot of white on the bottom.
It should not be there, as there are no elements after the last section.
You have three <div />s with classes file, sites, and contact on your last page which start about halfway down but have a CSS declaration forcing them to be 100% height.
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.