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
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 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/
I am trying to scale up a linked image and reduce the opacity on hover. I have the image in a container to make it a circle with border-radius and the container has overflow set to hidden. I have everything working except that when I hover, the full image appears for a brief second before the overflow is hidden again. Here is a codepen mockup: http://codepen.io/jphogan/pen/WbxKJG
I have tried a few of the solutions I've found on here including setting the image to display:block. I've also tried setting the background color and overflow hidden to the container rather than the link, but I had the same result. I tried adding overflow hidden to the image itself, though unsurprisingly that did nothing. I just need the excess of the image to stay hidden throughout the transition.
Here is the CSS the way I have it set up now, although I've gone through a number of iterations to try and solve this. I appreciate any help. Thanks!
.solutions_role_container {
text-align:center;
}
.role_img_container {
width: 70%;
margin: 0 auto;
}
a.solutions_role_image {
background:#000;
border-radius: 50%;
overflow: hidden;
display: block;
border: 1px solid #B1C3DA;
box-shadow: 0 4px 10px #C6C6C6;
}
.solutions_role_image img {
width:100%;
-moz-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-o-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
display:block;
overflow:hidden;
transform:scale(1);
}
a.solutions_role_image:hover img {
opacity:0.7;
transform:scale(1.08);
}
Add these rules to role_img_container:
border-radius: 50%;
overflow: hidden;
z-index: 2;
position: relative;
The a and img tags should no longer need any css for overflow or border radius. You could add z-index: 1 to solutions_role_img just to be safe, but I don't think it is necessary
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 have various transition effects on mouseover, such as changing image opacity. However I want a smooth transition when the mouse is moved off the item, and so I added transition code to the normal #div as well as the ##div:hover, however this is causing it to "transition" in on page load in a rather unsightly manner (doesn't work when refreshed, only on first instance of page load) and was wondering whether there's an equivalent to javascript's mouseout function so that the transition does not occur on page load.
Here is an example of some of the CSS:
#main_categories_item_image img {
width: 64px;
height: 64px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
box-shadow: #000 0em 0em 0em;
}
#main_categories_item:hover
#main_categories_item_image img {
opacity: 0.7;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
And I'm working on the website www.ultimate-punch.com
Many Thanks