I am looking for solution, but can't find anywhere. I have block and I have other block under it. The first block has style "opacity: 0". So he is at the top of the other block and in that block (which opacity is 0) has few elements. The problem is there, that mozilla opacity: 0 accepting as display: none and i don't know why is that.
any solutions?
If you set the opacity of the parent to 0, then all his elements will be hidden.
Maybe tell us what are you trying to do and we'll try to find a better idea that will answer the terms.
First of all, your JSFiddle - jsfiddle.net/5zWZe/1/ doesn't use opacity. So this example seems unrelated to your question.
For an example with a button covered by a div, see this JSFiddle - jsfiddle.net/X7S3w/2/. As you can see, the button isn't accessible through the div, even if you reduce the opacity to 0. Also note, the behaviour is the same in either Firefox or Chromium.
It seems, you have a special case with an iframe and flash video. See this other JSFiddle - jsfiddle.net/X7S3w/3/ with identical CSS, but the button replaced by an iframe. Here the flash video is accessible, although the div is above the iframe. But again, same behaviour in Firefox and Chromium.
Covering the iframe/flash video with the div seems to work, when you modify the query string of the youtube URL and append ?wmode=transparent
<iframe id="without" src="http://www.youtube.com/embed/5f-n3-pV81A?wmode=transparent"></iframe>
<div id="opacity">opacity</div>
See this JSFiddle - jsfiddle.net/X7S3w/4/ for a working example. Now the div blocks the flash video successfully. And again, this works identically in Firefox and Chromium.
So it seems this is more a flash issue, than some CSS opacity behaviour.
Related
I’m running into an interesting CSS issue on my portfolio site that I haven’t been unable to solve on my own. I’m using the and tags to transition from an image to a caption/button on desktop hover or mobile click. Unfortunately, it works on all browsers except for Safari iOS.
On my iPhone, I’ll click one of the images and it won't respond; but if I hold down on it, I'm then able to select the caption text which is seemingly there but not visible. I don’t experience this issue on any other mobile browsers that I've tried so far.
See the “Projects” section of this page from Safari iOS to attempt to duplicate the bug.
The specific lines of code regarding this issue can be found here (HTML) and here (CSS).
Note that I used the Bulma CSS framework to create the site, and have since tried several manual changes/additions to the CSS for this section in an attempt to resolve the issue. No luck yet. Any ideas?
The issue is the .overlay div inside of figure. Because it span the entire width and height of the parent, it's blocking clicks (taps) on mobile and preventing figcaption from being revealed.
One way to fix this without JavaScript (the dream) is to add tabindex="0" on the figure element.
<figure class="image is-3by2" tabindex="0">
Adding tabindex will allow the element to respond to :focus, removing the overlay when figure has been touched.
.image.is-3by2:focus .overlay {
display: none;
}
There's possibly no straightforward solution for this, but any suggestions for a workaround or pointers to some documentation of this issue/ behavior is welcome.
Scenario:
If I apply a custom on-focus CSS style, such as:
:focus {outline: 2px auto green; }
Issue:
Parts of the outline still show on the previously active links even after focus moves away.
In the screenshot, the last link with the green outline is the currently active element. The rest of the links with small green lines around were active only previously.
These remaining bits of the outline go away after a few seconds on their own or when you drag the mouse over them (or disturb that area of the page in some other way).
Context:
I am working on a chrome extension for accessibility, and I need to set an explicit style to the active element. The reason I am hoping to use outline-style:auto is that 1) applying any other style except auto (like "solid", "dotted" etc) give another issue and 2) also, it looks better.
I am aware that outline-style:auto is not supported by other browsers.
Using Chrome 27.
You might check to see if an outline-offset is being set.
I had a similar problem, I was using Bootstrap and it was setting:
a:focus {outline-offset: -2px;}
Doesn't sound like you're using Bootstrap, but maybe something similar is happening for you. I changed it back to the default:
a:focus {outline-offset: 0px;}
that seemed to work for me. Hope this helps!
(Warning, outline-offset is not supported in IE: http://www.w3schools.com/cssref/css3_pr_outline-offset.asp)
I had the same issue. In my case, I set an outline and a box shadow. Both seemed to stick to the element.
When I added the outline, I also set the box position to "relative" to make it stand out. For some reason that I can't explain, giving the box a z-index of 1 (bringing it forward) when I set the position to relative completely fixed this issue for me.
I think I asked about the opposite problem a while ago (allow mouse event to pass through a transparent area on an image - I ended up using an imagemap for that) but anyway:
I need a mask element for when a dialog comes up. In the past I've used:
position:fixed;
left:0;top:0;right:0;bottom:0;
background:#000000;
opacity:0;
filter:alpha(opacity=0);
And it works, but it's kind of a "hack".
I've not been able to get an element with background:transparent to intercept mouse events. Is this intentional? Is there any way around this other than the above? Or is the above the best solution for this problem?
The issue with background:transparent appears to be specific to IE (tested in IE7/8/9). It's not an issue in other browsers.
It's also specific to HTML form elements. For instance, it works fine in IE for text inside a paragraph tag but not for a button tag. Most likely it's a rendering bug in IE, rather than the result of a deliberate engineering decision by Microsoft. There used to be a similar issue in IE6 with select boxes not layering correctly with position:absolute.
It'd be safer to use opacity than background:transparent in this case. It may feel less like a hack if you change the opacity of the mask to make it partially transparent instead of fully transparent.
I have some nav elements positioned with transform: rotate() and box-shadow. When you hover them they 'pop out' a little bit to indicate you can click on them. In Chrome and Safari (indicating this is a webkit issue) when you hover some of the nav items the box shadows go haywire and cover up portions of other random elements. It works fine in Firefox.
I made a jsfiddle portraying the issue as simply as I could figure out how to:
http://jsfiddle.net/Q39eJ/1/
Hover over and then out of the first one or 2 elements and you'll see the issue in action.
The site I'm working on has the issue here:
http://temp.go-for-english.com/
(URL will soon change to http://www.go-for-english.com if this one doesn't work)
If anyone can figure out a work-around that still utilizes CSS3 to make it look normal (Maybe set the z-index again on the hovers, or some other weird workaround that I'm not sure about) I'd greatly appreciate it :) I'd really rather not resort to images :(
UPDATE:
I've been informed it looks fine on Windows Chrome =\ I'm using Mac OSX 10.6, here's a screenshot of the behavior I see:
http://s9.photobucket.com/albums/a74/nZifnab/?action=view¤t=Screenshot2012-01-19at13205PM.png
My client has also pointed out the issue because they use Safari.
I figured out a bit of a work-around that mostly works. Found this stackoverflow question: How can I force WebKit to redraw/repaint to propagate style changes? related to forcing a repaint of elements using javascript. So I updated my fiddle with this code to force a repaint of the elements with box shadows:
$(function() {
$('.top-nav a').hover(function() {
redrawMe($('.top-nav a'));
})
});
function redrawMe(obj) {
obj.hide();
obj.each(function() {
this.offsetHeight;
});
obj.show();
}
I tried only redrawing the element that was being hovered redrawMe($(this)); but it didn't work, when any of them gets hovered, I need to redraw all of them. Appears to mostly do the trick but there's still some darker shadows that appear in the cracks between each element. I feel that this is acceptable and barely noticeable. jsfiddle with my proof of concept:
http://jsfiddle.net/nzifnab/Q39eJ/4/
Haven't updated that live site with it yet, but shall soon.
If anyone can manage to find a way to make even the shadows between each element disappear I'll accept your answer instead :)
Again, this may only be happening on MacOS X in both chrome, and safari.
For ages now my site has had a catalogue where the small image is directly within a link within a div. The link must only be around the image - but I do not want to use the + selector since this is not supported by some versions of IE (IE6 onwards I think it needs to support). The div has class "ImageHoverSpan" (it used to be a Span on an older layout, I just havent bothered renaming the class). There is another div, with class "ImageOuterPanel", on the same level as the link (i.e. a direct child of the ImageHoverSpan).
I have the following classes defined:
.ImageHoverSpan .ImageOuterPanel {
display: none; }
.customer .ImageHoverSpan:hover .ImageOuterPanel {
display: block; }
This certainly used to work fine as far as I can remember - on all browsers. I am about to launch the new version of the website into testing, but I just noticed today that, in Opera 10.60, the image panel (ImageOuterPanel) is displaying straight away on hover over the ImageHoverSpan, but it takes anything between 1 second and.. well.. never to disappear when the mouse leaves the div.
I know using :hover on anything other than links can slow performance in IE - but this is Opera. In Firefox (3.6) this works absolutely fine - it appears and disappears as it should.
Has anyone got any ideas about what could be causing this? Anyone had this problem before?
Thank you.
Regards,
Richard
Well I have found an answer. I asked the question on the Opera forums, and a user posted back that I could have an Opera stylesheet which keeps the elements visible but sets opacity to 0 or 100 instead. This works - the elements appear and disappear instantly.
Richard