css transitions not working in safari - css

If you look at my page http://debourg-dev.ch/crea/ you will see the transition effects on my links don't work in safari (tested on latest version on mac). My code is the following:
a {
color: inherit;
text-decoration: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
What is the problem?

It seems Safari has a bug and chokes on transition: all; (or just transition: Xs; because 'all' is the default property). It even crashes some versions of desktop and iOS Safari.
SOLUTION: Change it to transition: color 0.5s ease-in-out;
(Or, of course any other property, just make sure it's not 'all'.)
It could also be a problem specifically with the transition being applied globally to anchor tags - read more here
More about Safari crashing
And here

The transition appears to be working for me when running OSX 10.9.1 and Safari 7.0.1. If I had to guess, the issue is likely due to cacheing. Try clearing your cache and see if the problem persists.

For Safari try the following:
-webkit-transition: 190ms width linear;
where width represents the property being changed, prevent use of all as different browsers interpret this differently and can cause issues especially in Safari browser.

Related

CSS background-color transition not working in specific browsers (desktop + mobile)

I have this SCSS that, in theory, should transition the background color smoothly, but it is not smooth in specific browsers.
See this codepen for a demo: http://codepen.io/ahegyi/pen/Wvjajy
(Click on the photo or note text to activate the transition. It's more obvious if you click on the text.)
.overlay {
-webkit-transition: background-color 0.2s ease;
-moz-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
-o-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
background-color: rgba(0,0,0,0.3);
&.reveal {
background-color: rgba(0,0,0,0);
}
&.conceal {
background-color: rgba(0,0,0,0.7);
}
}
In Chrome desktop (version 42.0.2311.152, Mac OS 10.9) and Firefox desktop (version 36.0.4, Mac OS 10.9), the transitions are smooth.
However, in Safari (both desktop v7.1.3 + mobile Safari on iOS 8.1.3) and Chrome mobile on iOS (v 38.0.2125.59) do not transition, and instead snap directly.
Can anyone reproduce this issue? Is this a bug in certain versions of WebKit, or am I missing something here? Could it be that other transitions I use interact poorly with this particular transition? (In parallel, I'm also using a height transition on .mark-note-text h2, and a jQuery slide effect on the .mark-content div.)
The issue appears to be caused by a syntax error in your externally loaded CSS.
In this file, you will find this code.
.mark-object .overlay{-webkit-transition:background-color, 200ms, ease;-moz-transition:background-color, 200ms, ease;-ms-transition:background-color, 200ms, ease;-o-transition:background-color, 200ms, ease;transition:background-color, 200ms, ease;
Which looks like this beautified.
.mark-object .overlay {
-webkit-transition: background-color, 200ms, ease;
-moz-transition: background-color, 200ms, ease;
-ms-transition: background-color, 200ms, ease;
-o-transition: background-color, 200ms, ease;
transition: background-color, 200ms, ease;
As you can see, there are commas between the properties, the duration, and the easing function, but there should only be commas to delimit different properties.
Also, the CSS you have in your CodePen is less-specific than your external CSS, so it has no effect. If you were to increase the specificity, your pen would work.
You can see how Safari is error-handling this in the applied styles.
However, Firefox error handles it in a different way, assuming all for the bare settings.
We can see from the computed styles that non-iOS Chrome does the same as Firefox.
Of course, the reason Chrome behaves the same as Safari on iOS is because iOS Chrome uses the same rendering engine as Safari, as per Apple's requirement.

Transition bug in chrome

And to the point, in one of my apps client got a transition bug, in chrome, latest version - when he loads the page css transtions are not working at all, then , when he scrolls, or does some different stuff for some time transitions are back on, and some time later they are not working again (Video of it). Transition example:
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
And the site itself.
P.S. I can't reproduce bug on my pc, or any pc I have access to, but client have it on 2 of 5 pc. Any help will be appreciated.
We have two computers out of fifty that have this Chrome bug too.
https://code.google.com/p/chromium/issues/detail?id=451756
This is fixed in version 40.0.2214.115
I saw in your stylesheet that you :hover selector set on :after pseudoselector, for ex. (line 468 style.css):
.news ul li a:hover:after
On some chrome versions that might not work , to make it work you need to declare the hover by itself;
try:
.news ul li a:hover {}
.news ul li a:hover:before { /* This works (needs :hover declared) */ }
I couldn't reproduce the bug muself because I believe this was fixed on new chrome versions_

Safari doesn't render modal windows

I am using the "just me" effect from here, however I am having problems with Safari v5.1, it just doesn't render the modal. When inspecting I can see that the modal should be there but it just stays transparent. Is there any trick to force the browser to re-render?
EDIT: I have also checked the css properties that are being used and they are supported.
EDIT2: Here's the link in case it's hard to see http://tympanus.net/Development/ModalWindowEffects/ , I am using exactly the same code and the highest z-index.
To anybody interested:
In this case the transition is transition: all .3s ease; but Safari has problem when it has to transition opacity and visibility at the same time. Changing to transition: opacity .3s ease, transform .3s ease; (with all necessary prefixes) fixed it.
.faded{
opacity: 1;
}
This worked for me.

img:hover transition not matching given variable

http://coreytegeler.com/new/ click on the up arrow and hover over the figure to see what I'm talking about
Ok so I am trying to create an inversion effect on hover of the silhouette, I've gotten all the CSS to change accordingly and used some minor JS to replace the image but the fading transition for the image goes much quicker than everything else. Even when setting the time to far more than it should be it does not seem to effecting it.
You should be able to see my style sheet at the link below, it's pretty tiny but I figured I'd let you guys see it all instead of the specific lines I'm talking about because I believe there could be a conflict.
http://coreytegeler.com/new/css/style.css
#shadow {
width:33%;
-webkit-transition: all 2.2s ease-in-out;
-moz-transition: all 2.2s ease-in-out;
-o-transition: all 2.2s ease-in-out;
transition: all 2.2s ease-in-out;
}
#shadow:hover {
-webkit-transition: all 2.2s ease-in-out;
-moz-transition: all 2.2s ease-in-out;
-o-transition: all 2.2s ease-in-out;
transition: all 2.2s ease-in-out;
}
Your code is not working on :hover because you simply change source of img. CSS has nothing to do with it.
You can place image in a div and set other image as div's background-image. Then on hover just reduce opacity to 0.
Demo
EDIT
In future you can use CSS filter property. Currently its supported by just -webkit. It'll be as simple as
img {
filter: invert(100%);
}
and you're done. But currently its just
img {
-webkit-filter: invert(100%);`
/*-moz -o -ms all are unimplimented*/
}
Proof of concept (Use chrome or safari to see the effect)
+filter(W3C)

CSS transitions in webkit

I am seeing an interesting bug in chrome regarding CSS transitions.
The page flickers during the transitions. For now i have only seen this in Chrome.
You can see this on my porfolio: www.dkhalife.com
Just scroll down to the skills sections and hover over any of the social icons on the right repeatedly, you can't miss it...
The CSS transition code is mainly :
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
And basically i am just changing the opacity and margin using a hover pseudo class.
I have tried:
-webkit-backface-visibility: hidden;
As mentioned on some other questions on SO but it doesn't seem to fix my problem.
Any help is appreciated.
Instead of
-webkit-transition: all 500ms;
animate just the properties you want to change
-webkit-transition: opacity,margin 500ms;

Resources