I'm making my personal website and encounter this problem.
On top left of the corner there's a button. It's supposed to be clickable but for some reason it is hidden behind an image (in a sense that you cannot interact with it but you can still see it). Using my debug skill, it leads me to a conclusion that the animated image (with -webkit-transform) (note you cannot test this on Firefox or other browser yet) is probably the reason that mess up the priority of elements.
I tried to fix it with z-index 100 or 10000 but still no work. Strangely, if I remove the elements .bg number 2,3,4, the button is clickable again.
If anyone can please tell me if it's a browser bug and if there's a workaround for it.
My website: http://iflyingangel.com/
position:fixed creates a new stacking context, so z-index isn't behaving as you would expect: http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Try this simple fix, let me know if it works for you:
.bg { pointer-events: none; }
Related
I have encountered a strange bug using my OpenCart website in Chrome. The product images are not showing up but I see the white area where they should come.
If a product doesn't have an image it's aligned to the left but in this case I can see the white area where the picture normally is.
And here's the crazy part, if I click on inspect element, suddenly the image appears.
Some css code
.product-list .image {
float: left;
margin-right: 10px;
overflow: auto;
}
In the CSS you need to set the width and height attributes.
That is weird. Regardless, things to check:
Z-index: The outer box that surrounds the image might be "above" the image itself. Add z-index to the image with a value of 9999 to check
Position: if it's parent container or god knows what else has a weird position it could be affecting where the child element, in this case an image is appearing.
Disable JS - Javascript might be causing an issue here, try disabling it to check.
Also, when you use chrome dev tools, you are technically "hovering" on the image. And you say it suddenly appears. So I'd take a look at your :hover rules as they apply to images. A lot of sites will use a sprite technique that shows one image in normal state, and then shift the background to a different part of the same image on hover. Your normal state could be empty and the hover then moves the bkgd position to the image you want.
Let me know how this turns out.
More scenarios to replicate this issue
1. Close inspect if not already opened.
2. Resize inspect if already opened.
3. Resize browser window.
Just to follow up on this issue, Mary's answer is the correct one, but for our circumstances it was important not to set a width and height in order to maintain responsiveness. But apparently setting width and height to auto works just as well, even though it makes no difference in appearance.
So, since opening the Web Inspector resizes the page in some cases, you should look into:
resize handlers on JavaScript side that might be causing your images to show up
media queries that satisfy certain width and only show images then on CSS side
Picture element having media queries that
aren‘t covering the width you are viewing this with.
For me this was the Picture element having a gap in its media attribute definitions (<source media=(min-width: 1824px)">).
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 think I'm going to tear my hair out if I don't figure this out.
http://www.keystoneelderlaw.com/
If you highlight over Resources in IE 8, the dropdown box is cut-off. Normally this would be caused by an overflow: hidden property or something in higher up in the tree. But in this case, I don't understand what in the world is causing it. Any help?
I set the height on to 500px to make sure that wasn't impacting the problem. I'm at a loss.
Update: I solved the problem myself after hours of hair-pulling. Its a problem with IE Propietary filters. Read my own answer further down the page and you'll find a link to the issue in detail.
RESOLVED:
Evidentally, Internet Explorer propietary filters cause divs to act like they have "Overflow: hidden;" set even if you try to explicitly set them to "overflow: visible;".
I had a "filter:" gradient set the div and that was causing the problem. But its also been stated that alpha/opacity filters can cause the same behavior. The problem is described in detail with a hack here:
How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?
I ended up just removing the filter completely and letting IE visitors not see a gradient. I hate hacks. They're not worth it.
In your css add property to #slide
#slide
{
z-index:-999
}
it looks like your dropdown menu is being rendered behind your carousel, look into z-index and see if this can solve your problem (give the dropdown div's css a higher z-index that the carousel) http://www.w3schools.com/cssref/pr_pos_z-index.asp
I have no idea what is wrong. No links (Navigation or image links) work in Firefox but work perfect in IE and Chrome
http://graves-incorporated.com/test_sites/solera_new/index.html
Please help me out
-Dan
I don't have Firefox on my laptop unfortunately, but this problem is often due to another element sitting on top of the links. Usually this is caused by a layout element such as a table or div.
Do you have Firebug or similar installed? There are a few developer tools out there that give you a coloured outline of your elements as you select them. It might help you to identify if you have an element sitting on top the links.
Check element img#rightAligned, it over all your menu links.
try #layout_style_links {z-index:9999999;} or bigger then current your img#rightAligned z-index
You have a td with absolute positioning (!?) that seems to cover the entire page. Don't use absolute positioning on a td element, that's just wrong.
Or even better, don't use tables for layout at all. This isn't the 90s anymore.
This activated the links for me in FF:
td.imageholder {
position: absolute;
visibility: hidden;
z-index: 9999999;
}
I'm sure this is something simple but I am just not seeing it.
My wrapper DIV is floating left and the A tags within are displaying correctly but mousing over them you'll see that they are not the proper height/width.
I can't seem to get them in line, could someone take a quick look and tell me what I am missing?
Page is here, it's the social media icons
Any help is greatly appreciated, again I am sure it's something simple.
--Edit--
I am on a Mac, tested with firefox and safari so far, they don't hover correctly, only the very bottom portion of them actually function as a button.
In firebug, if I remove the wrappers float attribute, the links hover as they should. So I know it has something to do with the float.
On Chrome the icons are in a line but, as you said, only the bottom portion of them is active. The problem is that your #branding element extends down below the bottom of #main, partially obscuring #subWrapper, #sub, #left, and part of #right (though not enough to cause a problem there).
You could put overflow: hidden on #main, but then the graphic in #branding would get cut off at the bottom. (The graphics look very nice, BTW.) I think if you just add a positive z-index to either #sub or #subWrapper, such as z-index: 1, that should do the trick.