I really am at a loss on this one. I forked this CodePen for a really cool button transition and I'm using it on my site. (Forget who originally made it but they rock).
The crazy thing is that the code works on CodePen in all browsers, and on the site in Chrome and Firefox, but not in Safari. In Safari, when the button is hovered over, the red bubble fill never appears and the text simply turns white (making the button invisible for all intents and purposes).
I've looked at this answer and this answer.
Since it seems to be an issue with the parent-child relationship I tried adding suggested code from one of the other answers:
.parent:hover .child{ display:inline-block; }
but this doesn't accomplish anything. I know it's basically impossible to debug since the codepen works fine, but any general thoughts or things I could try would be amazingly helpful. Thanks!
I have a one-page website and I've added some sections with big background images set on them. I wanted them to have a "fixed" effect so when user scrolls they don't move. So I used background-size: cover; and background-attachment: fixed. This does the job. The problem however, is it's extremely laggy in Chrome, I think chrome doesn't cache images or something. You can test it here:
http://jsfiddle.net/sallar/rwyfZ/1/
its not smooth like other browsers. So I tried using images (in this case using $.backstretch). Using this method the scrolling lag is fixed and scrolls very smoothly, but it doesn't have the "fixed" effect I wanted. So I thought I should use a parallax effect. But none of the parallax plugins or methods I tried did a good a job on "images", they were all optimized for background-image which I can't use because of that problem in Chrome.
Here is a demo of Backstretch example:
http://jsfiddle.net/sallar/FX4Cn/1/
So, What should I do to make them have a fixed style and make the page scroll smoothly like the second example?
Thanks in advance.
I cant see any big difference except that the second one isnt fixed for sure.
I think your "issue" is that Chrome scrolls in steps, what Firefox and Opera dont (i dont really know about the others atm). Next time you may try to google something like "smooth scrolling chrome" to see one of hundrets questions and solutions for this "problem".
It theoretically is possible to do this with Javascript, but i cant find any useful/working example atm.
I made a infinite carousel from scratch into a plugin with jquery. It works fine in Firefox but it works partially in Chrome, i.e. elements disappear as I slide the carousel.
Please view my codes here (it was too long to paste it): http://jsfiddle.net/HkTks/2/
Compare the carousel with Firefox and Chrome.
Why is Chrome behaving like that?
Many thanks​
Well, this may be a webkit bug. Looks like somehow the anchor element accidentally inherited absolute positioning rather than relative.
Seeing the style of .iconList a to include position: relative; and removing top:0 seemed to fix it for me.
Here's the updated fiddle: http://jsfiddle.net/HkTks/4/
I have done a jQuery slider using EasySlider which is supposedly IE6 compatible and have made a simple menu bar below.
I'm having issues with them both working in IE6.
I've set up a JSFiddle with the code here: http://jsfiddle.net/PVS5B/1/
Would really appreciate it if someone with good CSS knowledge have a look at my CSS and can figure out why it's not working.
In IE6 the slider comes up, but the slides don't appear apart from the YouTube clip and the menu background shows, but no menu options (#controlslider).
Thanks
Use another jquery slider, for example nivoslider.
IE was very young at that time, i guess only 6 years old :P when these awesome sliders came into being, so that's why IE cannot handle this, you cannot blame a child for this bug, children are innocent.
hope this helps.
I have a simple unordered list that I want to show and hide on click using the jQuery slideUp and slideDown effect. Everything seems to work fine, however in IE6 the list will slide up, flicker for a split second, and then disappear.
Does anyone know of a fix for this?
Thanks!
Apologies for the extra comment (I can't upvote or comment on Pavel's answer), but adding a DOCTYPE fixed this issue for me, and the slideUp/Down/Toggle effects now work correctly in IE7.
See A List Apart for more information on DOCTYPES, or you can try specifying the fairly lenient 4/Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Just let IE6 flicker. I don't think it's worth it to invest time in a dying browser when your base functionality works well enough. If you're worried about flickering for accessibility reasons, just sniff for IE6 and replace the animation with a generic show() and hide() instead. I recommend avoiding complicated code for edge cases that don't matter.
$(document).ready(function() {
// Fix background image caching problem
if (jQuery.browser.msie) {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
}
};
Apparently.
Oli's fix only seems to apply to flickering backgrounds, which is not the case here.
Ryan McGeary's advice is solid, except for when the client/your boss absolutely demand that IE6 not act like it has fetal alcohol syndrome.
I found the solution here: Slide effect bugs in IE 6 and 7 since version 1.1.3
Added a doctype declaration to the top of the file (why wasn't it there before? who knows!) and the flicker vanished, never to be seen again.
From what I've heard and tried (including the other suggestions here) there are still situations where the flicker will continue to be noticeable, especially when you don't have the choice of easily leaving quirks mode.
In my case I had to stay on quirks mode for now and the other suggestions still didn't fix the problem for me. I ended up adding a little workaround until we can finally leave quirks mode:
//Start the slideUp effect lasting 500ms
$('#element').slideUp(500);
//Abort the effect just before it finishes and force hide()
//I had to play with the timeout interval until I found one that
// looked exactly right. 400ms worked for me.
setTimeout(function() {
$('#element').stop(true, true).hide();
}, 400);
This code does not depends on the browser (no browser detection), works great and reproduces the behaviour of the method .slideUp
$("#element").animate({
height: 1, // Avoiding sliding to 0px (flash on IE)
paddingTop: "hide",
paddingBottom: "hide"
})
// Then hide
.animate({display:"hide"},{queue:true});
Dunno if someone will read this answer, but here is a workaround for those who, like me, can't add a document type to the page (thank you Sharepoint 2007 default templates) without spending a few days on a complete template revision.
On a DOCTYPE-less document, the flickering occurs when an element height reaches 0. So the workaround I've found is to animate my elements to an height of 1px, rather than 0.
Like this:
$(".slider").click(function (e) {
$(this).animate({"height" : "1px"});
});
Hope it will help.
N.B: don't forget that in order to slideDown the element, you have to previously store its initial height somehow (node property, rel attribute hack, etc).
I'm working with a carousel that has marked-up copy over some background slides. The slide transition is a fade. Everything's fine so far.
But some parts of the copy fade-in after the slide loads. And then fade-out right before the slide transition. This copy, an unordered list of links (UL > LI*2 > A), faded-in over the slide background. This, too, is fine in every browser except IE. IE had a flickering background on the UL.
What was happening is that there were two simultaneous fade-Ins running: the background image on the slide & the UL. I used sergio's prototyping setTimeout function to run the UL fadeIn() after the slide had completed loading. Then, I called another setTimeout to make the slide transition right after the UL fadeOut().
setTimeout is your friend when combating IE flicker.
We had the same problem today. Not only in IE6, but also in IE8! I've fixed it by hiding the div somewhat earlier, by using a timeout:
var pane = $('.ColorPane');
var speed = 500;
window.setTimeout(function() { pane.css('display', 'none'); }, speed - 100);
pane.slideUp(speed);
Hope it helps some of you out there.
I posted a quick fix solution over at http://blog.clintonbeattie.com/how-to-solve-the-jquery-flickering-content-problem/
In short, add overflow:hidden to the containing element that you are sliding in/out. Hope this helps!