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>
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'm fairly new to HTML and CSS work but have been very proud of how far I've come with the help of forums like this one. So first and foremost, thank you!
My question: I am using a Colorbox on my website that displays a popup on top of the current page. The problem is, if I scroll with the mouse wheel and the pointer is resting in the grayed out area (the original page I opened the colorbox from), the original page scrolls down...thus eventually moving the colorbox off the screen.
What I want is for the colorbox to always be visible in the middle of the screen, regardless of how a user scrolls. The only way to get rid of it would be to close it.
I've read a lot about using the position:fixed attribute, and have attempted to do that but had no success (tried surrounding the colorbox with a simple div with a "position: fixed" setting). Plus in looking through various comments is seems like the fixed position is something that should be used sparingly, if at all.
Does anyone have a suggestion on a div I can create to keep the colorbox positioned on the screen at all times? Or maybe an alternative idea, like preventing the ability for a user to scroll down the grayed out area of the original page?
Here's a link to the page that displays the issue. If you click on one of the dozens of sample story links, you'll see the colorbox appear. When it does, start scrolling down the original page and you'll see the box eventually goes off the screen.
Any advice would be greatly appreciated everyone. Thank you!
The problem is that the Colorbox Javascript appends inline style to the box which will override external or internal CSS. Give your property values !important to prioritize.
#colorbox {
outline: 0 none;
position: fixed !important;
top: 10% !important;
}
Background:
I am trying to transition smoothly between various presentations of my website using media-queries and CSS3 transitions. So far everything appears to be hunky dory, however, I've hit a snag while transitioning between a presentation that contains a vertical scroll-bar and one that doesn't. I think it's pretty common to change website widths with media-queries, so I was surprised when nothing came up on Stack about this.
The problem
Webkit browsers appear to enter an infinite loop / flicker when the transition results in a change to the presence or absence of the vertical scroll-bar. Here is a demo of the behavior.. to trigger it, just re-size the window slowly around the 700px wide mark in Chrome or Safari PC.
Question / what I've tried
I'm wondering what the workaround here is for Webkit? Firefox has no problem with it. I've tried removing the easing and transitioning faster (not preferred). I realize that I can simply remove the vertical transitions and simply transition the width, however, it is important to my design to transition both height and width.
I think the easiest solution would be to force the scroll bar to always be present. The simplest way to do that is by using this little snippet:
html {
overflow-y: scroll;
}
Here is your example with the above snippet added: http://jsfiddle.net/joshnh/8XW4v/show
I'm not sure if it is a webkit bug, because if you think about it, it is expected behaviour (it's just weird, and Firefox have done a smart thing in making sure it doesn't happen). Basically, when the media query kicks in, the element shrinks, and the parent no longer needs a scroll bar. The problem with this is as soon as the scroll bar disappears, the media query is no longer relevant due to the extra few pixels that are now available. So the object grows again, the parent brings back the scroll bar, kicking in the media query again, and so on...
I'm having problem with the standard iframe background and scrolling (IE8).
I load a standard iframe with scrollbar that contains a long list. The problem occours when I'm scrolling to to the bottom of the list and then continues to scroll with the wheel. It looks like the background continues out of the iFrame and into the main area of the screen. It's hard to explain this, but look at the picture.
The only thing that seems to work is to but display: none on the iFrame. Is there a way around this. I've tried overflow: hidden but it doesn't seems to work.
another question. what's the correct way in css to set display: none into a iframe?!
EXAMPLE PICTURE, click here!
I'm trying to fade in a div in a webapp I'm building for iPad. The iPad chokes trying to use jQuery's fadeIn() method so I'm trying to do the transition with -webkit-transition: opacity 1s linear and changing the opacity to 0 or 1 with javascript. It looks pretty smooth, except that it flickers once quite jarringly at the end of the fade.
As I learned here a while back, this flicker instantly disappears when I set -webkit-backface-visibility: hidden. Unfortunately, when I have that set, the div no longer detects the click or touchstart events used to dismiss it. I'm very confident this is the problem because when I remove that property in the inspector, it will read clicks perfectly. I found someone else mention a similar bug in a comment on SO but no solution was given.
Does anyone have any ideas how to work around this?
The trick was that the divs I was trying to read the click on were in a collapsed 0x0 div. It's a bit bizarre that backface-visibility would make or break that, but I was able to fix the problem by making the previously collapsed container full size and adding js to turn it display block and none at various times.