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
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;
}
I have a problem with a slideshow I coded.
It worked fine before, the website is online since january.
The problem is only when using Firefox 46, other navigators are displaying the elements.
The page with the slideshow : http://www.rotin-file.com/en/accueil
8 buttons appears, in the debugger I can see the 8 containing background images of products, and the absolute containing the title, reference and price, but it doesn't appear in the website...
I tried to change many css properties (with the debugger) to find from where the problem comes (z-index, visibility, display, opacity, ...) but I can't understand why it's ok with Chrome and IE but not ok when using FireFox...
I verified all plugins are desactivated (also adblock is disabled for the whole domain) and tried on other computers with firefox, it never work with it...
Any idea to help me ?
Sorry for my bad english, and thanks for any help.
Two things to do, first remove:
#slideProduits #cntSlide {
perspective: 1200px;
}
Second, you need z-index for your pager, so add:
#ctlSlide {
z-index: 100;
}
But why it does not work in FF46, I have no idea. Guess 'cause css perspective is still an 'experimental technology'.
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.
One of my sites has a horizontal navigation bar which is created using a list. Besides a small bug in Firefox the list looks & works fine by now - except in Opera 11.61. There the list elements won't show up at all! As the list is the site's main navigation it is nested inside a nav element. So far my debugging showed that this is where the problem is.
When I remove any background information (like background-image or background-color) from the nav element the list is still invisible - I can see the body's background-color.
Also assigning different z-index values did nothing. But removing the nav element helps - when there is no nav the list shows up.
I created a small test case illustrating the problem (remember: Must be opened with Opera.): http://jsfiddle.net/sX5KF/
Do you have any clue why this problem occurs? Is there a fault in my code or is this just something like a bug in Opera? What can I do about it?
Alright I found the mistake. Opera displays nothing because I set content: ""; on the after-element. Other browsers seem to ignore it, but not Opera. I set it because I read it is needed, but actually it works even without content: "";.
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.