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.
Related
I am trying to make a responsive website, but I am stumbling upon a weird problem. When I am looking on the desktop page, everything is in the right position. There are no pixels left.
However, when I am loading the responsive version on my mobile, I see some pixels left (just scroll to the left or the right and you will see what I mean). The problem gets bigger when there is content like a single post or page.
The website is here: http://FavoriteFM.com.
I can provider the CSS code, but it will be a lot of lines. I am suspecting something in the content is 'sticking out'. But I am not sure of a tool that can see such problems.
Thanks,
Dennis
Today I have disabled every div by div. I figured out the problem is with the sidebar. I still had: 'left: 8px;' on. Removing it did the trick for me. So if you have this problem, check if something of your content is 'sticking' outside your wrapper. Even if you can't see it, it still can be there.
This is the strangest bug I've ever encountered with chrome, unfortunately I cannot show you example images because of legal restrictions but I'll try to explain it as good as possible.
So I'm building this website which has an infinite scroll through viewport-sized sections. In the first section I have a form and an html5 video with position fixed in the background and then simple background images for the followup sections, odd numbered sections with background-attachment: fixed; which gives somewhat of a parallax effect.
Now the very odd thing is: as soon as I have focused one of the form inputs in the first section, all the sections with background-attachment: fixed; lose their background image... it's still in the CSS rule but doesn't get rendered (just white).
I tried several solutions for similar issues like this SO thread or this post. Now the funniest thing with the second one is if I add -webkit-transform or -scale to the sections with fixed bg images, the problem occurs right away without any focusing... I really cannot figure this out.
I hope someone can help me with this issue because it's pretty important to have that parallax like behavior.
Here's a jsfiddle showing the problem anyway, not exactly like on my page but you can see the bug, there the video is shown instead of the image, but on my page I set the video to position absolute after scroll has reached the 2nd section, so it's just white...
I too have encountered this problem.
The thing is that background-position will make content fixed at that position based on the browser window.
For parallax effect, try with some plugins
I have a Raphael.js SVG element living inside a div. Occasionally—when the page loads, or when a jquery-ui-draggable is dragged over the main svg node—the whole SVG element (over?)flows almost below the page. That is, if it started at 0,0 and it's 500px high, it jumps to 0,500 all of a sudden, and not always. I've tried setting position:relative but that doesn't seem to fix it. Actually, tweaking the position: in the Chrome debugger makes it "come back", but keeping it there through a page load doesn't fix the issue permanently. It happens maybe half of all page loads.
Anyone know what might be causing this, or at least a way to keep it jammed at the top? I'm rather CSS-ignorant.
Apologies for not having an example; it's part of a large setup that I can't share at the moment. I'm hoping someone has a hunch.
Can you examine the generated source code while it's happening (I use the Web Developer tool and there's an option in there to view the generated source code — and am sure there0s something similar in Chrome) to see if there isn't an element being inserted before it (or that something in your program logic is causing the canvas to be duplicated). I once had some very strange behaviour with Raphael and found that it was linked to my inadvertently loading the same script twice on the page.
I could always suggest absolute positioning too in CSS but that doesn't sound like it would fix the underlying problem.
Good luck and a hope that helps.
Apparently it was some CSS transforms: the input paths weren't in the right coordinate space, so we were doing a -webkit-transform: translateY(400px) scaleY(-1); in the <svg> element. I'm gonna try scaling the paths before putting them in the DOM instead.
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.