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.
Related
I'm stuck I'm trying to display this background animation over all my containers/entire page but ever since i implented scroll snap they don't want to coexist I know the overflow hidden is the problem is their anyway you guys think I bypass this. i want the background animation to display over the entire screen while still having the snap scroll...i tried everything from javascript to switching around postions... I also want the animation to be behind the text if possibly
link:
https://jsfiddle.net/bossmanricky/3q2h0pnb/2/
html
<h1>please help</h1>
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.
There is a gray border showing around the dropdown image, as seen above. That shouldn't be there. I've seen several other questions which state that this is the case because the src of the image cannot be found or loaded. However, that's not the case here. The element contains a src tag which is set to a 16x16 blank GIF.
The file '/images/system/blank.gif' exists, and can be loaded by Safari. Also shows up fine in the Network panel, as 200 - OK.
However, and here is the reason of the bug I guess... In the elements panel the image shows up as:
I can load this image fine in Safari, opening it in a new tab shows as 16x16 GIF... No idea what's going on here.
Just FYI, this is Safari only. Chrome does not show the gray border around the image.
Note: Changing to a transparent PNG image solves the issue, but I'd like to know the underlying cause.
Tracked down the issue to... uBlock!
uBlock decided that an image in the form of /images/system/blank.gif?v=12345 was an ad and decided to cancel the request. The joy.
I have a bit of a IE8 problem (sound familiar?)
I have a button. when you hover over the button the hover state produces a larger box that has html inside. in this particular case, it's a small music player.
so it goes like this, when you hover over the button it produces a small music player with clickable links and some text. you can move your mouse anywhere inside this box, but as soon as you leave the box/music player, the hover state goes away again.
sorry but I don't know how else to explain it.
this all works a treat except for IE8.
in IE8, the hover state disappears as soon as the mouse leaves the original small button. so navigating around the music player becomes impossible.
now I have noticed that when there is no html in the hover box, it works fine, but when there is html (in this case an iframe) it loses the hover as soon as I touch any html inside the hovering box. so it looks like the problem is not the hover box, but the code inside the box that makes it lose focus
what I would like to know is, is this a known issue in IE8, or could it just be bad coding from my side. in which case i can post the css.
I've had problems with :HOVER states in IE8 too and I noticed that the same CSS (even pointing to the same external CSS file) worked on some pages but not others. The solution for me was to consistently add a DOCTYPE to the top of all pages (above the starting HTML tag).
It seems obvious now, but sometimes (especially when editing old sites) the DOCTYPE is not always specified.
I hope this helps!
Your problem doesn't seem to lie in hover itself. Firstly you assume some window height and your project just look weird if the height is different. Assuming you did some very exact calculations on such assumptions your problem is probably the box model problem. box-sizing:border-box might help, but you would have to recalculate everything.
Also you can use timeout before the elements gets hidden/drop down so that micro mouse movements don't shake elements and maybe allow to "catch" them.
Having both things in mind all hovering problems should be fixable.
EDIT: For iframe hover have a look at: Iframe hover not working in IE (all versions).
I have a fairly image heavy site and have image rollovers (:hover) on a lot of images on the page. The page loads but the rollovers images take longer to load and cause a flickering when the user intially rolls over the image. I know that this issue has been disscussed many times however I have not found an appropriate solution that works.
I am using safari, background rollovers are done through css. Need some kind of hover image preloader or delay script or similar but any suggestion is welcome
Thanks
Check out CSS Sprites. That's the time-tested, tried and true technique for avoiding flicker like this on hovers.