I am creating a template and getting problem in adjusting the header. Everything is almost completed but header shows the problem. The problem is when one hover over the menu, it shows everything working great but one hover any nav item which have drop down menu, then it decreases the font size for the next item.
I have tried creating a new header also but still gets the same problem only when there is a drop down menu.
You can check the code at http://html.daatcreations.com/mobeva/
The artifact you are seeing isn't a change in the font size, it is caused by the rotateX transform. The browser is making room for the edge of the dropdown that has been rotated around the X-axis so you can see the edge.
It's hard to diagnose but it's easy to fix. You need to set the backface-visibility property to hidden on the elements that are rotating or making room for the rotated element's edge.
.dropdown {
backface-visibility: hidden;
}
Related
This is a very weird and specific bug that only happens on Firefox, and I'm having trouble narrowing it down.
I have a page with a sticky menu followed by a fluid container.
In order to remove all padding from the container while keeping everything else untouched (like column gutters), I had to add this CSS to it:
#main-container {
padding: 0;
overflow-x: hidden;
}
This is the only simple way I found to do that, and it works.
If you remove the overflow property, some horizontal scrolling appears.
See https://stackoverflow.com/a/35192643/5845942
But when I pin the menu, scroll until its position becomes fixed, and interact with certain items on the page, vertical space appears on the page, between the menu and the container.
This happens when triggering CSS transitions and other JS DOM manipulations.
Here is a jsfiddle: https://jsfiddle.net/vctls/mac2Ls0d/35/
A screenshot:
And a video:
https://imgur.com/a/28KhPEY
Again, this only happens on Firefox. Chrome handles the layout without any issue.
It doesn't happen either if the menu isn't pinned, or if you remove the overflow property from the container.
This seems to be a Firefox bug. I found a similar issue was already reported:
https://bugzilla.mozilla.org/show_bug.cgi?id=1618029
I'm trying to find a workaround.
I have a layout that when an element is clicked, it expands and opens a modal
dialog. When it's clicked a position:fixed clone is appended to the body with the same position properties so that it appears in the same position as the original element. The clone then expands to fill the page to act as a dialog box.
A noscroll class is added to the body
.noscroll {
overflow: hidden;
transform: none;
position: relative;
}
This is where the problem starts to happen. When the clone element is in the middle of transitioning its position properties, a document repaint happens causing the transition to freeze and then continue when the repaint is over.
This only happens in Safari for some reason. Here's a screenshot of the timelines
to show what I mean
When I don't add the noscroll class, this doesn't happen. This is driving me crazy, I've tried everything and this keeps happening.
I encountered this issue today and the solution was to resize all of the images on my page.
For me, the huge green layout event actually wasn't layout or paint but composite. I understand this phase to be when the browser actually draws everything to the screen.
This was (I think) because all of the images on the page were way too big for the size they were being displayed at; ~14mb for images that were at most 300px wide. Resizing all of my images to a more appropriate 300x400 got rid of this issue completely. It makes sense that a bunch of huge images being hidden and shown would be really hard for the browser to draw. Still at a complete loss as to why this problem is triggered by overflow: hidden, and on Safari only.
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 a Flexbox based nav menu with a logo aligned in the horizontal center of inline links. Every pen or fiddle I tried making of this doesn't replicate what I'm getting for some reason, but you can go to this Flexbox test here which is almost exactly what I'm working from and if you go into an inspector and add an anchor to the main logo image you'll see what I mean.
The way this is set up is the third link has a left margin of auto applied to fill in the extra gap for the logo to fit in. The logo area is separate from the nav menu in the markup but flexbox layout puts them all in line with each other (at lower breakpoints the nav menu moves down).
Now this all works fine and good until you decide to make the logo a clickable link. When you do that, the margin from that third link obscures the hover state of the logo.
Here's a visual example:
So if you tried hovering over the logo where the margin area intersects it, you would not be able to click the logo, nor get a pointer cursor or any hover states (like a background change). Outside of the margin while over the logo, it works fine, but to a user, they're going to think something strange is going on. This happens if the logo is an img (as it is in the original example) or an SVG (as I'm trying to use).
Trying to see if there's a way around this without having to completely nuke my Flexbox layout. My markup is very similar to what is being used in that example. I've tried toying with a higher z-index for the logo compared to the nav, which didn't work. Giving the nav a negative z-index lets you click the logo but then you can't click the nav items.
You can add a relative position to the logo and then play around with the z-index to make the logo the first element.
.logo {
position: relative;
z-index: 1;
}
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.