I have a div which gets the width set to 280px:
HTML:
<div id="propertiesPane">.. </div>
CSS:
#propertiesPane {
position: absolute;
width: 280px;
right: 10px;
top: 6px;
bottom: 0px;
left: auto !important;
-webkit-transition: width 0.1s linear;
-moz-transition: width 0.1s linear;
-o-transition: width 0.1s linear;
transition: width 0.1s linear;
}
#propertiesPane.collapsed {
width: 50px !important;
}
Also, what's happening is in JavaScript code, on document ready and depending on a flag, the 'collapsed' class is applied, which sets the width to 50px.
The problem is this works fine on desktop (IE, FF, Chrome) and Android 4.3 but not on Safari iOS 8+.
On Safari, although the 'collapsed' class gets applied, the width is not 50px but 280px. If I remove the 'transition' line from the CSS id selector, it works OK.
Is there a strange "race condition"-like on applying the width on Safari? I'm inclined it is, because sometimes I see it works correctly, the width is set to 50px.
JSFiddle: https://jsfiddle.net/fkhq88eb/3/
Related
I'm using transitions to move text when their parent element is hovered. However, the transition is not reversed when testing in Safari. This results in the text quickly jumping back to the beginning if you stop hovering the parent element before the transition has finished. If you do this in Chrome, the transition reverses back to the beginning.
Can this be fixed in Safari in some way?
GIF showing Safari & Chrome comparison
Safari not reversing clearification
Overview of CSS:
.infoContainer {
display: inline-block;
position: absolute;
transition: bottom .5s ease-in-out;
-webkit-transition: bottom .5s ease-in-out;
bottom: 1rem;
}
.body:hover .infoContainer {
bottom: calc(100% - 1.8rem - 1.3rem - 1rem);
}
Running Safari Version 16.1 (18614.2.9.1.12), Chrome Version 108.0.5359.98.
Expectations and attempts:
I was expecting the transition to be smoothly reversed like it is in Google Chrome. I've tried using the following CSS without success.
-webkit-transition: bottom .5s ease-in-out;
I can't comment so I will write my answer here.
You can add this
.infoContainer {
display: inline-block;
position: absolute;
bottom: 1rem;
transition: bottom .5s ease-in-out;
-webkit-transition: bottom .5s ease-in-out;
transition-delay: 1ms;
-moz-transition-delay: 1ms;
-webkit-transition-delay: 1ms;
-o-transition-delay: 1ms;
}
It should help on safari ;)
I'm getting strange behaviour occurring in Safari on OSX and more noticeably on iOS with this CSS driven radiobox multi-select form I'm working on...
http://s.codepen.io/achisholm/debug/jPzzzB
Same page with editors visible...
http://codepen.io/achisholm/pen/jPzzzB?editors=110
During the .3s transition, notice the width of the multi-form__option-content element seems to go from 0 to 100% while opening and closing.
It doesn't happen on any other browser, only Safari. Why is this happening and how can I prevent it?
You could change transition: all .3s ease; to transition: height .3s ease;
&__option-content {
overflow: hidden;
transition: height .3s ease; /*this one*/
height: 0;
padding: 0 20px 0px 50px;
line-height: 1.6;
http://codepen.io/anon/pen/MwVXNb
I'm having an issue when trying to position :before content in Safari. In Chrome/IE the content is positioned correctly, but Safari is interpreting the styles differently (see: http://jsfiddle.net/danwoods/Yb8aR/). my initial thought was to remove the position: absolute from the span:before, but that presents it's own issues...
Does anything look out of place? Any explanation as to why Safari is displaying things differently than Chrome?
Thanks,
Dan
I'm not sure what problems you were having with removing position absolute, but I've changed it to position: relative, used top: 4px to line it up with the text, and display: inline-block to allow margin right to separate it from the text.
span:before {
content: url(https://dl.dropboxusercontent.com/u/6114719/progress-2.png);
display: inline-block;
position: relative;
top: 4px;
margin-right: 5px;
transition: all 1.5s ease-in-out;
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
}
Fiddle is here: http://jsfiddle.net/Yb8aR/5/ - tested in Chrome and Safari.
Note:
Looks like Safari aligns the before pseudo-element to the span element, whereas Chrome seems to align it to the text within the span element (which is centered). Why that happens, I'm really not sure.
In web-site (www.kkbio.co.uk) i created a script that fix navigation bar on top and the logo is changing to smaller version by CSS3 transition. It's working in google chrome, but in firefox it isn't. Other transitions don't work too. I don't know why) Help me please:)
for example:
.navbar-brand {
margin-right: 0px;
padding: 0;
width: 342px;
height: 82px;
margin-left: 15px;
margin-top: 15px;
-moz-transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
-webkit-transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
-o-transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
transition: height 0.5s, background-position 0.5s, margin-top 0.5s ease;
}
.fixed .navbar-brand {
height: 74px;
margin-top: -5px;
background-position: 0 -82px!important;
}
<a class="navbar-brand" href="http://kkbio.co.uk/" style="background-image:url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);"></a>
It looks like you've got a few problems here...
You've used !important which is almost always a bad sign, and you've used it twice on the same element, so which rule is more !important?
Avoid using !important whenever possible. In this case it looks like you can avoid it by using:
<a class="navbar-brand" href="http://kkbio.co.uk/" style="background-image: url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);"></a>
rather than:
<a class="navbar-brand" href="http://kkbio.co.uk/" style="background:url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);"></a>
Firefox will fill in default values if you use shorthands like background so, while Chrome reads:
background: url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png);
Firefox reads:
background: url(http://kkbio.co.uk/wp-content/uploads/2013/08/copy-logo1.png) repeat scroll 0% 0% transparent;
Working Example
I want to make an expandable block using css transitions.
.box {
width: 300px;
max-height: 30px;
overflow: hidden;
background: #aaa;
-webkit-transition: max-height 400ms ease-in-out;
-moz-transition: max-height 400ms ease-in-out;
-ms-transition: max-height 400ms ease-in-out;
-o-transition: max-height 400ms ease-in-out;
transition: max-height 400ms ease-in-out;
}
.box.open {
max-height: 999px;
}
Here's working example: http://jsfiddle.net/qswgK/.
When I expand the block, it slides down well, but when I want to collapse it, it occurs with some latency.
This is noticed in lastest versions Chrome, Firefox, Opera and IE.
Why does it happen and May I avoid this without using javascript animations?
P.S. If use height animation instead of max-height, collapse works well, but I need collapse and expand block with unknown expanded height.
It looks that it happens because the collapsing animation starts to change the max-height from the very large value and it takes to it some time to cross the actual height of the element, and the visible change of the height starts only after that moment. The only workaround I see is to use separate animations for expansion and collapsing — a bit longer one with easing-in for the first and a bit shorter one that starts very sharply and eases out just before ending for the latter, like the following:
.box {
width: 300px;
max-height: 30px;
overflow: hidden;
background: #aaa;
transition: max-height 300ms cubic-bezier(0, .6, .6, 1); /* for collapsing */
}
.box.open {
max-height: 999px;
transition: max-height 400ms ease-in; /* for expansion */
}
fiddle