Css3 Transition ( Vendor Prefixes) Crashes Safari Immediately

CSS3 Transition ( Vendor Prefixes) crashes Safari immediately

Safari has some trouble sometimes with all-property transitions.

Try this:

#logo {
    -webkit-transition: color .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}

Edit: After playing around with it some more, it's actually the combination of your usage of -webkit-transition: all and -webkit-calc() that's causing the problem. This is a bug in Safari, and in order to overcome it, you may need to use javascript to calculate your top margin instead of CSS.

Hope this helps!

css3 transition is not smooth in safari

I'm actually astonished that your jQuery hover function does work at all, because what you'd actually need is mouseenter -> addClass and mouseleave -> removeClass, but it might be me not exactly being aware of how jQuery's .hover() works.

Nonetheless, there is absolutely no need for jQuery or even Javascript to change styles on mouseover. You have the pseudo-selector :hover for exactly this purpose: Put the styles your want to transition to into

.package-down:hover { /* properties to transition to */ }

Next, do not repeat styles that the element already has and that do not change.

Last, if your problem is that not all property transition are taking an equal amount of time, don't specify so:

transition: margin .1s ease, transform .25s ease-out;

This will make the margin changes take 0.1s, but the rotation to take 0.25s.

Please describe more concisely what your transition is to look/perform like.

http://codepen.io/anon/pen/aOJmKe

Also, please be aware that you are not doing a css animation here, but a css transition. Read more about the differences here:

CSS: Animation vs. Transition

iOS 6.1 / 7 - Cordova 3.1.0 + AngularJS - App crash on click/scroll into HTML/CSS View with [NSCFSet opacity]: unrecognized selector sent to instance

Unbelievable but true, it was a CSS problem. Even with iOS7, CSS calculations and parsing is buggy and crashes the browser and the WebView - on all Android phones this worked totally fine!:

HTML:

<div class="financial profileBlock">

We have the following CSS:

#profileContainer .profileBlock table td {
    border-bottom: 1px solid #d2d2d2;
}

#profileContainer .profileBlock table {
    font-size: 1.1em;
    border-top: 1px solid #d2d2d2;
    margin-top: 10px;
}

this crashed the WebView when clicking/touching/tabing or trying to scroll and as a result the whole hybrid App. It also crashed the Safari when accessing the HTML page using a URL!

When we refactored the CSS to the following and it worked:

#profileContainer table.profileTable {
    margin-top: 10px;
    font-size: 0.9em;

    td {
        border-bottom: 1px solid #d2d2d2;

        &:first-child {
            border-top: 1px solid #d2d2d2;
        }
    }
}

---

Related Topics