I'm getting a flicker in the first 3 of 9 main navigation items in my CSS menus (there are no submenus), which occurs in IE, Safari, Firefox and Chrome, but ONLY on the home page.
Specifically, the first menu item "About" flickers the most, while "Admissions" and "Academics" both flicker, but not as overtly.
My thoughts are that something is conflicting with the menus on the home page, specifically something unique to the home page, such as the Google search I've embedded in the upper navigation (and tried to style as unobtrusively as possible), or the jQuery slideshow.
I've tried several solutions suggested here for flickering in webkit, but none have solved the problem.
It looks like it's caused by your dropdown curtains being too wide. So hovering on the nav item shows them, which then immediately causes the mouse is positioned over them and not the nav item... causing them to be hidden again. Hence the flickering (I think!).
This doesn't happen on the nav items to the right because they're short enough so they don't cover the nav links when 'hidden'.
See image below of the width.
Changing the css to have a larger top value of -800px like the following may help:
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -800px;
}
Related
Codepen: https://codepen.io/Bobby__K/pen/eYZXQKo
I made a navbar with the encompassing nav given position: fixed.
.main-nav {
position: fixed;
z-index: 10;
left: 0;
top: 0;
padding: 0 5%;
height: 100px;
background-color: white;
width: 100%;
}
When I run this on Chrome, Firefox, and Firefox mobile, it works as intended; i.e. the navbar doesn't move and stays at the top. However, when I run it on Google Chrome mobile and scroll down, the navbar goes up a bit and then the fixed positioning seems to kick in. The problem here is that this cuts off a good 10% of my navbar.
Since this only happens when I preview Google Chrome's mobile view, I was wondering if this was just a visual bug shown in developer tools, instead of something that would happen once the website's live.
Notes:
I've made it responsive using the input method and with CSS :checked. As such, I usually keep the checkbox to the side with overflow-x hidden. I've tested the project while having the checkbox on the screen, but the same problem happens, so that wasn't the problem.
I've also tested this on Opera mobile view and Brave mobile view and the scrolling issue happens there too; so maybe this is something to do with how my code reacts to the Chrome Engine?
I've narrowed it down to a weird interaction with my #media screen and query. Whenever I make a change, it fixes the problem. However, once I close developer tools and reopen it, the scrolling issue reappears.
do you happen to have a codepen or something with the full html and css (and js if applicable). I'm wondering if there's a conflicting style outside of .main-nav that's causing this.
I've tried for a long time to get this to fix. The big text navigation is at the top in IE11/10/9, but all other browsers have it placed lower. When you hover over the other nav, IE will push it down in the proper spot.
here is the demo site:
https://xdvn.000webhostapp.com/
Hmmm....it seems like adding the height to your secondary nav fixed the issue in IE.
#secondary_nav {
text-align: right;
position: relative;
height: 77px;
}
I am still trying to wrap my head around it to know why exactly this is happening. It seems like IE doesn't know where the bottom will be for that absolute element until that link is hovered over. So set height for the first nav element will make it behave right.
I used this blog post (see comments - I can't post more than two links because I am new to SO) to put a sticky (but not fixed) footer on my website.
It had been working everywhere on the website, until I used this blog post (see comments) to display my images on hover. Now the footer floats quite aways above the bottom of the page, but only on the pages with the image hover styles. Here is a broken page, and here is one where it is working.
I am guessing it has to do with the styles for the ul.enlarge span because when I remove those in the Chrome dev tools, the footer pops back into place, although it causes the enlarged hover images to all appear on the page (obviously not what I want).
Is there a way to both get my footer to stay on the bottom of the page (even when the content doesn't reach all the way to the bottom) and still enlarge my images when I hover???? What is causing that giant blank gap at the bottom of the page??
It's because full-sized gallery images on the broken page (hidden far left from the view window) are taking some space, you can fix the footer by changing position of the element containing those images from
ul.enlarge span {
left: -9999px;
position: absolute;
}
to
ul.enlarge span {
left: -9999px;
position: fixed;
}
So those images wont interfere with the rest of the page while 'hidden' as position: fixed; is positioning elements relative to the browser window
You can also check how and why it's broken via changing left value to 0 so u'll know what is happening in the background
edit: As suggested in the comments, you could also fix the page by fixing gallery styling
like that
ul.enlarge span {
display: none;
}
ul.enlarge li:hover span {
display: block;
position: absolute;
left: -20px;
top: -300px;
}
so it wont break your footer in the future
I've got a contextual menu that appears when a button is clicked. This menu has some links and after some seconds is hidden again. The problem is that after the menu has disappeared the links are still there. They are not shown but are clickable and the green border appears. And after some seconds they disappear.
I've tryied many ways of hiding the menu: display: none, visibility: hidden, width: 0, height: 0, jquery hide, jquery fadeout... but none worked. Also hidding the links.
Does anyone have a idea about what's happening? With the rest of the browsers it works without problem
Thanks
Sounds like a bug. Try this:
position: absolute;
left: -10000px;
Working in Chrome, I found the AngularJS animations appear to break elements that have position: fixed applied to them. I can not reproduce the issue in Safari or Firefox.
I'm unsure if I'm doing something wrong, or if I could be doing something better to fix the issue.
I have a Plunker illustrating the issue here: http://plnkr.co/edit/fhI7M7ev75AGYzesf4GB?p=preview
To reproduce, the following must be done (as the layout of Plunker seems to fix the issue):
Run the Plunk (in Chrome)
Breakout the preview into a new window
Reduce the height to show just the colored box
Click on the "Click Me" button and then scroll to witness issue
If you reload the scrolling list page the top banner will be correctly fixed to the top.
The CSS for the top banner is simple:
.fplcd-top-banner {
background-color: #7c7c7c;
background: linear-gradient(to bottom, #7c7c7c, #666666);
height: 50.15745px;
left: 0;
margin-bottom: 7.16535px;
padding: 7.16535px;
position: fixed;
top: 0;
width: 320px;
z-index: 10; }
If you edit the plunk and remove the animation (at the bottom of the CSS file, comment above them) styles, the issue no longer persists.
Is this a known issue, or am I doing something just odd enough that would knock Chrome out of whack? In either case, is there a tweak that can be done to fix this up?