I have an unordered list with image links and when you hover over them they fade out a little bit and this shows all good in every browser except IE, of course. At first I thought it was just a png bug but after applying both of those fixes it still doesn't work. The page is at:
The page.
If anyone knows what is going on please let me know as I am completely stumped now. Thanks
It appears to work in IE7 and IE9, but not IE8. Interested, never seen that before.
Anyway, you can fix the problem by using a different method. Instead of using a list, just have your images (with links) inside the containing <div>, then apply a style to the links such that they have display: inline-block; - this will allow you to align them vertically with each other (vertical-align: middle;) and set their width if you want.
The opacity fade is being achieved by styles that IE doesn't support
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
It works in IE9 so first guess is you are using some css or javascript that isn't supported for earlier versions. You need to post the code so we can give you better guidance on how to resolve this.
Related
The problem is the following: I have a gallery plugin on Wordpress, called Fancy Plugin installed. Works fine, except now when I look at the gallery, the images are very very faint (the opacity is very low), then, if I hover over the image, it gets less opaque, then I hover again and it gets better and better. I need like 10-15 mouse passes for the image to be on opacity close to 0.9, but then it does not change anymore. I want to switch this off completely, I do not want any kind of opacity in the gallery, I want it to be 1. I don't know what CSS to use to do this.
I tried inspecting with Chrome DevTools, that's how I found this piece of code:
<img class="fg-thumb" src="http://www.faktumkft.hu/wp-content/plugins/radykal-fancy-gallery/admin/timthumb.php?src=http%3A%2F%2Fwww.faktumkft.hu%2Fwp-content%2Ffancygallery%2F2%2F2%2Fvizszintes_palcas_korlat__09.jpg&w=200&h=150&zc=0&q=100" alt="Vízszintes pálcás korlát, ívelt" style="width: 200px; height: 150px; opacity: 0.825593;">
I can see the weird opacity number that seems to be kind of random, there, but I don't know how to change it. Can someone help please? Thanks!
Fast fix would be adding next to your css:
.fg-thumb{
opacity:1 !important;
}
However what you find pointing to so called in-line styles, and they may come from some javascript (may be from that plugin). You may want to read some documentation or/and check source code if it is available.
I'm trying to work out why only the before and after elements are being rendered in the below example and how I would go about getting the span rendered as well.
The problem seems to only occur in Chrome, though I've only tested Opera, IE, Safari and Firefox as well.
Unfortunately as I'm not 100% sure why this is occurring I can't provide any further information.
http://jsfiddle.net/ddoticus/2egfkpu4/
dd {
max-height: 0px;
overflow: hidden;
transition: max-height 1.5s;
-webkit-transition: max-height 1.5s;
}
I believe the above code is the problem though.
If you open and close title 3 and then open it again it renders the span's background as white.
If anyone could explain a- why this is happening and b- an effective workaround that'd be very much appreciated.
This problem seems to have solved itself, it appears Google must have done an update or something as this, and the original problem I was having that this question was based on, has now been fixed.
If anyone can provide any explanation as to why this occurred that would be very much appreciated, but for now the problem has been resolved.
I have one strange bug on my website. When i trying to transform block with text by using
transform: translateY(0px) translate3d(0,0,0) translateZ(0);
i got this block but with black (or white) stripes behind the text. I suppose in depends what background is - light or dark.
I can't attach the screenshot for example, so i leave a link.
Animated blocks - text block that appeared when you scroll the page.
This animation perfectly work in all browsers, but not in Firefox (windows ver.).
Maybe someone saw this and could help...
Thanks!
I solved my problem by setting
outline: 1px solid transparent;
property for each animated block on the page. It was helpful.
I found this solution in this answer.
This might be a result of a bug that I have encountered. There are still quite a few of optimization problems when it comes to transitions, in any browser, but particularly Firefox.
Have you tried setting perspective: 1000; to the parent element? It's served as a quick fix to some of these problems.
Nice website, by the way!
I have a Ul tag on hover of it, I display a div using css.
Now i want that div tag will 1st fadein or any other effect like animate etc.
I know it can be done easily by using jQuery, but want to know can i achieve this using Html5,css3,css
Here JsFiddle
Fading in http://jsfiddle.net/thebabydino/Cedue/7/
There was never anything like -webkit-opacity or -moz-opacity
If you want to transition the opacity, then either write
transition: opacity 1s
or
transition: 1s
From what I can tell, removing the display: none; and display: block; lines from your code enables animation:
http://jsfiddle.net/Cedue/31/
(That is a copy of your original fiddle with only the display: lines removed.) However, this raises the issue that you can access, highlight, and even hover the text when it's hidden; if you do not wish to have that behavior you might wish to look into another means of hiding it until the correct area is hovered, such as shifting it with margins.
As Ana has mentioned, as well, if you wish to animate the entire fade you should use opacity as your transition parameter (e.g.: transition: opacity 1s ease;, with the additional lines for separate browser support). If you use background as the transition property as you do in your example, only the background fades and the text appears instantly.
EDIT: due to my own curiosity I tested this under Chrome and Firefox, each for both Windows and Mac, and can confirm that removing the display lines caused the animation to work on all of them.
Check this site, it uses css and javascript.
Pure CSS implementation here.
You should look into CSS3 transitions http://www.alistapart.com/articles/understanding-css3-transitions/
First of all, I've looked at this previous question but sadly it didn't seem to offer any solutions (other than JS which is a non-starter I'm afraid)
I've got some skip links at the top of my page...
<ul>
<li class="skip-link"><span>Skip to main content</span></li>
<li class="skip-link"><span>Skip to main navigation</span></li>
</ul>
and further down there is...
<div id="mainContent"></div>
which is an empty div purely there to act as an anchor point.
Everything seems to work fine when the link is activated; visually the page jumps down, and focus shifts to the first link after #mainContent.
However in Chrome (v 12.0.742.91), whilst the page visually shifts down, the focus does not, meaning that after activating the accesskey, tabbing again merely jumps you back up to the top of the page and back into the access links.
I had an identical issue with IE which was put down to a known quirk and was fixed by setting a specific width to the target element. However, that doesn't seem to work for Chrome. I have also tried adding a tab-able element into #mainContent div, putting any sort of content in the #mainContent div, as well as all sorts of float/width/height variations and nothing seems to fix it.
Has anyone had any similar issues with Chrome or knows a fix?
Thanks in advance folks
Simon
The best you can do until someone find a trick/hack is starring this issue which succeeded this one.
Your SO fellows will probably do the same because they care.
Apparently, it has finally been fixed.
I know this is an old question, but I finally stumbled across it today after searching for hours. I still haven't found a non-js solution to this, and though the issue is marked as fixed in Chrome, it still exhibits the same behavior. For a lack of anything else, I used jQuery. Rather than an inline script, I used an unobtrusive event listener.
The HTML:
<div id="skiptocontent">
Skip to Main Content
</div>
<div id="mainContent"></div>
The jQuery:
$(document).ready(function () {
$("#skipper").click(function () {
$('#mainContent').attr('tabIndex', -1).focus();
});
});
I also hide the link unless it receives focus from the keyboard. That way only keyboard users and screen readers will ever know the link is there. Using CSS3, you can ensure that it becomes briefly visible if a user tabs rapidly past it.
The CSS:
#skiptocontent a {
position: absolute;
top:-40px;
left:0px;
background:transparent;
-webkit-transition: top 1s ease-out, background 1s linear;
transition: top 1s ease-out, background 1s linear;
z-index: 100
}
#skiptocontent a:focus {
position:absolute;
left:0px;
top:0px;
background:#F1B82D;
-webkit-transition: top .1s ease-in, background .5s linear;
transition: top .1s ease-in, background .5s linear
}
For a demonstration, you can view the fiddle. If anyone has a way around the use of javascript, I would love to hear it. I don't think a solution is truly accessible if it requires js.
I came across this issue too and the only way I could find to fix it was with JavaScript (and jQuery).
So on the link I used an onClick $('#mainContent').attr('tabIndex',-1).focus();
"Adding the tabindex value of -1 to the div makes that div
programmatically focusable, allowing it to take the focus when the
.focus() method is used." -- Via: http://webstandardssherpa.com/reviews/overlays-and-lightboxes-keys-to-success/
See the fiddle:
http://jsfiddle.net/PEDaS/1/
Took the snippets above and tried generalizing them to target any potential skip link.
jQuery('[href^="#"][href!="#"]').click(function() {
jQuery(jQuery(this).attr('href')).attr('tabIndex', -1).focus();
});