https://codepen.io/fuzzalicious/pen/YzYwozv
.faq-content {
transition: max-height 2s ease-in-out;
overflow: hidden;
}
.dropdown-off {
max-height: 0;
}
.dropdown-on {
max-height: 1000px;
}
I have an animated dropdown that uses max-height, but I can only get it to work with static height, I would like it work with any content so you don't have to know the height in advance.
Now I'm setting max-height to 1000px which means longer lists would be cut off and short ones take long to animate. Is there any way to use something like max-height: auto or calculate the content height?
I have an issue where my CSS animation is jumping straight from start to end, and the issue seems to be related to the one answered in this post. My question is this: How can I make a width transition from x pixels to "auto" without actually using the auto keyword?
Width auto and a fixed width can't be animated. What you can do is change the max-width.
.element{
max-width: 0;
width: 0;
transition: your transition style
}
.element.active{
max-width: 9999px;
width: auto;
}
I'll hope this helps
I've been building a website in Safari, and I've just tested it in Firefox and my fixed navigation elements are behaving as if they're position is absolute.
#navigation {
display: block;
width: 100%;
height: 50px;
position: fixed;
left: 0px;
bottom: 0px;
text-align: center;
z-index: 99000;
}
This is the CSS I have for the primary navigation wrapper (it's a bottom nav.). In Webkit, it works perfectly: that is, it sticks to the bottom of the window regardless. In firefox, it positions itself at the end of the tags, so, for example, on a long page, I'd have to scroll down just to see it. It is acting as if it's absolute.
I also have a sidebar navigation.
.slidebar {
display: block;
position: fixed;
left: -1px;
top: -1px;
width: 1px;
height: 100%;
overflow: hidden;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-ms-transition: all 300ms ease;
transition: all 300ms ease;
z-index: 99998;
}
This sidebar is also acting as if it's absolute - that is, it is positioning itself off the screen properly, but it's elongating <body> and thus the horizontal scrollbar appears. The height: 100%; is also responding to the <body> height and not the window height, so, for example, my <header> has a top margin of 20px, and the slidebar observes that margin too (the body has 0 margin). Likewise, instead of the height: 100%; ending at the bottom of the window, it ends at the bottom of the <body>, factoring in the footer's bottom margin.
I cannot understand for the life of me why this is happening. Element inspection shows all the properties are loading fine, and in Chrome and Safari it works. It worked initially, and it worked the last time I even edited either navigation, but it has since stopped working since I built other, irrelevant, parts of the site.
http://www.upprise.com/demo.php - click the Envelope icon to see the sidebar
I had the exact same problem, turns out the following CSS property of a parent element was causing the problem.
transform: translate3d(0px, 0px, 0px);
Through the process of elimination I was able to determine that having the following in my body was causing all the problems with fixed divs in Firefox:
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
I had originally added this code to prevent flickering in certain CSS transitions throughout the site, but I guess I'll have to add it to each individual class now.
It appears that some browsers will will apply fixed positioning relative to the window, while Firefox is applying it relative to the <body />. You need to make your body 100% tall:
body {
height: 100%;
}
But the margin from your .header is collapsing outside of the body element. Change this:
margin: 25px auto;
to this:
margin: 0 auto; /* updated - thanks JoshC */
padding: 25px auto;
I solved the issue by moving the element that uses position: fixed; out of its original parent element that uses transform: translateX(-50%);.
Thus...
<div class="transformed-container">
<div="fixed-element"></div>
</div>
...became...
<div class="transformed-container"></div>
<div class="fixed-element"></div>
Two things led me to this conclusion:
#Pankaj's answer shows that the translate value can cause an issue.
#Wildhoney's comment to another answer references an explanation of the underlying cause: http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
The problem seems to be in your body, i've added width:100%; height:100%; and overflow:hidden; to it in my fire fox and it looked just fine, except for the bottom menu-bar that went half of it's height over the bottom.
Not sure why the browsers were rendering differently, though the solution is pretty simple. You need to give the parent elements (html/body) a height of 100% in order to fill the entire page. It seems like FF rendered the fixed elements at the bottom of the contents as opposed to the bottom of the window. Adding the following will make it work across browsers:
html, body {
height: 100%;
}
In addition, you should also use padding on .header element as opposed to a margin. This will solve another issue.
.header {
margin: 0 auto; /* use a value of 0 rather than 25px */
padding: 25px 0;
}
I tested all this in the browser, it will work in FF now. It should also render properly in Chrome and others.
I needed to remove some css classes from the superior container of the fixed-on-scroll element that had a transition, from the animateCSS library.
$(window).on('scroll', function () {
if (distance <= 65) {
$('#my-contaniner').removeClass('animated fadeInLeft'); //delete problematic classes for FF
Add your code
});
Maybe it helps
After 5 hours of debugging, if you are using tailwindcss and you have drop-shadow-* (pay attention it's not shadow-*) class on one of your parent elements, it will cause the fixed elements within that element to act like they're absolute positioned.
Not sure why that is happening, maybe due to fact that tailwindcss is using lots of combined CSS variables.
Here's an example of what gets generated with tailwindcss drop-shadow-* utility, seems like filter property on one of the parent elements causes the same unexpected behaviour as transforms:
.drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
filter: var(--tw-filter);
}
I have to make a responsive website and as i shrink the browser to a specified size, i want the logo on the left to move to the right so that it is in the centre.
Here's an example of the transition i want to achieve. It is under "2.Animating your transitions" box1
I know that the transition starts on hover but is it possible to activate it when the browser is resized? or any alternative methods at all?
You can do this by using a mixture of CSS3 transitions and the #media queries.
div
{
height: 100px;
width: 200px;
position: relative;
background-color: #eee;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#media all and (min-width: 400px) {
div
{
background-color: #fc3;
left: 100px;
}
}
What this does is sets up the transitions on the element with relative position but obviously does not fire them (as there's no :hover or other selector) and declares a change in position (left: 100px;) when the browser is more than 400px wide. Use max-width for a "more than" value.
Obviously you need to change the values to what you need, but this is how it should be done.
http://jsfiddle.net/AvhvD/
Here is how i would do:
1: .logo { display block, width: xxx; margin 0 auto; transition: margin ... }
2: #media (...) {
.logo {
margin-left: 0;
}
}
I was thinking that you could make a conditional statement in JavaScript and Jquery that would test the following to be true: If the browser window is resized and the size of the browser window is between a range, add a css class. If not remove the css class.
With this new class created, maybe you can make an animation using CSS3. I am not too familiar if this would work, but you could always just revert back to JQuery.
Furthermore, I don't know if transitions can be applied inside of media queries. If so, I am a big proponent and would highly recommend using them.
Hope I could help.
I want to align the top of a background image with the bottom of an element using CSS (so that I can make it transition in upon hover or in an animation, in case you were wondering). This element does not have a set height; I don't know what the height of the element is. Does anybody know how to do this? The solution does not have to be IE compatible; it only has to work in the latest versions of Chrome and Firefox.
EDIT: I'll award the bounty to an answer that also works for the <body> element if there is such an answer by the time that the bounty ends.
Sorry about the trouble. Gotta love CSS right? Anyhow I have two solutions for you: One just stays within the realms of using background positioning and achieves it... for the MOST part; The other one goes outside of the immediate solution, adds just a little bit extra, but is rock solid and works with any height at all. Both work with any width.
So the first one:
This works by setting the background-position to the keyword value center for the xpos and the percentage value 1000% for the ypos. Of course the % value can vary, but I just went with 1000% to be safe. In reality you could make this just big enough to push it off screen. But here's the fiddle:
http://jsfiddle.net/D5QME/
The problem with this one is that if you make the height of the parent element the exact height of the background image... it quits working. And if the height of the parent element shrinks below the height of the image, it reverse the pattern. So if you're confident that the parent element will always be taller than the BG image, this is pretty solid.
Now the second one:
This one is straight up rock solid but adds an extra element. This extra element can either be a placeholder element, like a div or whatever, or just the straight img itself. This:
1) Uses position: relative and overflow: hidden on the parent to turn it into a container
2) Uses position: relative, margin: 0 auto, and top: 100% to position the image in the center and push it just below the parent
3) and uses .parent:hover .backgroundImage to make the image transition to top: 0% when the user hovers over the parent element.
Here's the fiddle:
http://jsfiddle.net/Fwf6p/
Even though this adds an extra element, it is pretty rock solid.
Anyhow, hope this helps!
-J Cole Morrison
Another modification of J Cole's answer, but seems to work with the body tag. May also work with Hephistocles modification but haven't tested that.
CSS:
.example{
border: 1px solid red;
/* Change the height to anything you want! */
height: 400px;
/* Change the width to anything you want! */
width: 500px;
position: relative;
}
.example:hover .backgroundImage{
height: inherit;
top: 0%;
}
.backgroundImage{
background: url("http://img.gadgetian.com/Angry-Birds-Space-021-300x300.png") no-repeat top center;
position:relative;
margin: 0 auto;
top: 100%;
-webkit-transition: 1s ease all;
-moz-transition: 1s ease all;
transition: 1s ease all;
height: 0px;
}
HTML:
<body class="example">
<div class="backgroundImage"></div>
</body>
JSFiddle
To take J Cole's second answer a bit further - if you want to avoid inserting an extra element you could always use pseudo-elements. For example:
.myElm {
position: relative;
overflow: hidden;
}
.myElm:after{
content:"";
background: url("myimage.png") no-repeat top left;
top:100%;
position: absolute;
}
.myElm:hover:after {
top:0;
}
If you know the height of your element in pixels, you may be able to set its background position to be: background-position:0 npx;. Not sure otherwise. If there's a maximum height, you could always just use that. Or have a reasonable estimate/limit. The transitions may not 'ease' very uniformly, however.
There was an excellent JSFiddle in another answer just now, but it's been deleted :(