In Safari, I'd like to use CSS to animate between position: relative and position: fixed. Yes, I know this is a discrete animation. That's what I need.
This works as expected in Firefox and Chrome, but not Safari. Is this a bug? Is there a way to make this work?
https://codepen.io/z5h/pen/XWmNBgK
Related
I'm having issues with backdrop-filter in firefox, but only when one of the parent elements has a border-radius and an overflow style on it. has anyone seen this before? any workarounds?
heres a codepen i made that shows the issue: https://codepen.io/dbillings16/pen/WNKEBMg
thanks in advance
tried adding backdrop-filter: blur(10px); to a div, expecting it to blur the background. it is blurred in chrome, but not in firefox
Using IE11, but looking for a solution IE9+, I'm debugging why the labels at the bottom of this CSS bar chart are improperly positioned.
From what I can tell with the IE debugger -- despite the relative parent container having a definite width and height -- the position:absolute is not being applied to the ::before pseudo, resulting in strangely placed labels:
.chart span::before {
position: absolute;
left: 0;
right: 0;
top: 100%;
In Chrome, FF, etc. all is well: the labels are below the bar chart as expected. Any insight on why this occurs, or any tips on debugging ::before in IE (I can't target the ::before like I can in Chrome and FF)?
Try replacing top:100% with bottom:-21px on your ::before pseudo element. That seems to work in FF, Chrome, and IE9+.
Demo
I was trying to make some animations with transition on css, and all but the height of elements worked.
I'm using chrome, and some people with other browsers like safari told me that it was working, even tho I need it to work on all major browsers, and I'm currently trying to find a fix for chrome. Here is the fiddle:
http://jsfiddle.net/VPCxq/2/
As you can see I have my element (#test), and in my css I have:
#test{
height: 4vh;
-prefixes-transition-property: height;
-prefixes-transition-duration: 0.3s;
}
#text:hover{
height:8vh;
}
but the height isn't animated. In the fiddle I've put other things just to show that they worked. Has anybody got a chrome fix for this?
You can't transition to or from auto. auto gets replaced with 0. Add:
#test {
height: 4vh;
}
http://jsfiddle.net/bFJ29/
I have been trying to use CSS transforms on a element to center an absolutely positioned image, so that I can transition position from center to left. This is the basic code (with vendor prefixes in all of the combinations) I have been using.
position: absolute;
left: 50%;
height: 100%;
transform: translateX(-50%);
transition: transform 1s, left 1s;
And then on hover, the following properties are changed.
left: 0;
transform: translateX(0%);
This all works perfectly, but the problem starts when the height of the wrapper also changes during transition. WebKit appears to cache the width of the element from what it was before while transitioning the element, and because the width/height change during transition, once it reaches the end of the transition, it jumps to where it belongs. Here is a JSFiddle that shows my problem. It works perfectly in Firefox and IE10, but WebKit based browsers Chrome, Safari, and Opera, have a layout flash at the end of the hover out.
JSFiddle Example
I have spent the past few days trying everything I could think of to trick WebKit into behaving correctly, from adding additional CSS properties, transitions, animations, and even triggering a reflow on the element using requestAnimationFrame and timers, but nothing seems to help. I would be very grateful to anyone who can offer a solution.
This was apparently a bug in the vendor-prefixed implementation of CSS transitions where it pre-computes the target and does not update it after a reflow. It's no longer resent in the un-prefixed version in newer versions of WebKit.
This is odd and I may be missing something blatant by my main navigation buttons on build.advocatedaily.com have a CSS background color transition associated with them on hover.
It works in Chrome, but in FX it's just refusing to comply. Interestingly, when I open a submenu and hover off the element, the background color reverts to normal using a transition.
Thoughts?
remove
position: relative;
from .mainnav li, worked here
firefox can be funny sometimes.