I'm using flexslider to display a list of elements which are quite complex.
Basically each item has:
a background image in position: absolute
a foreground containing text and images
I have the following issue (only in Chrome): the foreground goes to the back during sliding transition and then comes back to front when the transition is finished.
Do you have any idea of investigation paths for this issue?
After reading https://github.com/woothemes/FlexSlider/issues/179 I solved the issue by using the following option at slider creation:
useCSS: false
Related
I have the following problem. There is delay in displaying photos in fading mode. When the animation starts the photo is not shown right away, but with delay. When animation passes to the next slide (second, third), a few seconds before it displays the image i see the background. It look like it was loading it with delay. But even when image is preloaded, issue can still repeats when I reload the page.
After passing all the slides once, the animation is smooth until reload the page. The picture is high resolution (about 1800px) because it's supposed to be something like hero slider.
Please Help!
OK, looks like nobody is going to answer my question. So I will answer it myself because someone may have a similar problem and use it a bit.
After many hours of messing with it, it turns out that replacing the method of inserting photos into img from background-image solves the problem. Thus, it can be assumed that the problem is in the very construction of the carousel. Don't use background-img to place images into divs. Use classic img with src.
If you want to have pictures fitting into the div like a cover option in bg-img mode, then for img you can add an object-fit: cover entry in css. That resolves problem.
I've been trying to find where a hover transition has been added in a WP theme so I can customize/disable the effect but I can't seem to find it. Can you help?
The website is here: http://www.thisisutil.com/journal/ The effect I want to customize/disable is the hover effect on the post images.
I found this by starting at the image and keep adding hover attributes until I see it pop up.
Another tool that could help you is the animation drawer:
I'm seeing some strange flickering in a JS submenu implemented using jQuery.hoverIntent on this page here. The flicker only occurs over images that are further down the page, hidden by the appearing menu in Chrome and Firefox and the whole menu actually renders behind those images in IE7. Weirdly, the previous implementation (here) works without the flicker. I'm fairly certain that it's CSS issue, since we are in the middle of a refactoring in which we're trying to consolidate stylesheets and scripts. Any help is greatly appreciated :)
EDIT:
Although my initial answer below still works to fix the issue, here is the real cause of the issue and a better fix.
The image further down in the page is in a positioned div (which is position relative). When the menu loads, it sets the z-index last. If you specify the z-index in your stylesheet, the fade will work and it will no longer flicker. This worked for me while inspecting:
ul#topMenuJs li.qnav0>div {
z-index:5;
}
OLD ANSWER: You are seeing the flicker because you are fading in the dropdown menu. You can do two things:
Get rid of the fade altogether and just do a .show() on the dropdown
Give the ul#topMenuJs li.qnav0>div an opacity:1 !important; to override the js
The latter I tested and it works.
I've created a web page, and it has 7 six sections with huge background images using background-size: cover;. It works fine in all browsers except Google Chrome (All versions/All platforms). When I try scrolling the page in google chrome or click on its links (which they also scroll the page using $.scrollTo) the page gets choppy and laggy and it scrolls slowly and uses 100% CPU.
I've uploaded the page so you can test it: http://baaemail.com/beta (I'll remove the page later). Even IE9/10 is fine, but chrome gets choppy.
The page has several "scroll" events bound to it and I have tried disabling the javascript altogether but it doesn't get better so its not from the scroll events.
I'm using background-size: cover because it shapes the photo exactly like I want it to and I want the image to be fixed that's why I can't use other methods like using img tag instead of backgrounds.
What should I do?
thanks.
A solution I found for myself for a website with similar behaviour was to add background-repeat:no-repeat css property for those divs containing huge background images.
You can also check if you have a background image for body or html that is repeated, for me the big problem was a repeated pattern image that interfered considerably with google chrome's scrolling performance.
Also if you're using CSS transitions on those "slides" you should check that those are not assigned to "all". If you're having a transition only for the "left" property there is no point assigning it for "all".
I'm not sure if this alone will help you but it is always a good practice to compress your images and your scripts.
This stuff did the trick for me. Hope it helps.
The css is pulling the image that allows me to swap images on hover.
My Problem is, on my first hover, image disappears. Second hover, image appears. And the following hovers, everything works fine.
Why and how to solve it?
It's because the first time you hover the browser has to request and download the new image from the server. This takes time and is the delay you see. Subsequent hovers work quickly because of browser caching.
You can, and should, avoid this by using CSS sprites.