Comments (10)
anyone resolved this issue?
from simple-text-rotator.
I get this issue as well.
from simple-text-rotator.
Same with me my site uses a this plugin in jumbotron of bootstrap and the text are reversed please solve the issue
from simple-text-rotator.
Same here in IE11
from simple-text-rotator.
The issue is with the backface-visibility: hidden
I made some adjustments to the css. Please note, I use Scss and only the "flipUp" animation ( made a slimmer version of the plugin to fit my needs)
The animation is not as smooth but is consistent over IE
Here is a codepen: http://codepen.io/bogdandin/full/mJIxA/
.rotating{
display: inline-block;
transform-style: preserve-3d;
transform: rotateX(0) rotateY(0) rotateZ(0);
transition: 0.5s;
-webkit-transform-origin-x: 50%;
width: 100%;
&.flip{
position: relative;
.front{
z-index: 1;
}
.back{
z-index: 2;
display: block;
opacity: 1;
transform: rotateY(180deg) translate3d(0,0,0);
}
&.up{
.back{
transform: rotateX(180deg) translate3d(0,0,0);
}
}
}
.front, .back{
left: 0;
top: 0;
//backface-visibility: hidden;
opacity: 0;
transition: opacity 0.6s ease-in-out;
}
.front{
position: absolute;
display: inline-block;
transform: translate3d(0,0,1px);
display: none;
opacity: 1;
}
.back{
display: block;
opacity: 0;
}
}
from simple-text-rotator.
Thx for fix but it makes safari reversed instead :(
from simple-text-rotator.
@Strutsagget I've made a similar plugin called Morphext if you want to achieve a similar effect, but without the compatibility issues that this one has (at least not that I know of). It has quite a few extra stuff and I'm actively maintaining it.
from simple-text-rotator.
Another workaround is to just test for IE in JavaScript and set the animation to fade
or dissolve
for IE. This code works all the way up to IE11.
// Check if this is IE and change the text rotation animation to dissolve
var textAnimation = "flipUp";
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
// If Internet Explorer
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
textAnimation = "dissolve";
}
// Setup rotating text
$(".rotate1").textrotator({
animation: textAnimation,
separator: ",",
speed: 2500
});
Source: http://stackoverflow.com/questions/19999388/check-if-user-is-using-ie-with-jquery
EDIT - It looks like there's some issues with the above code on IE11, here's another post on a more robust IE detection: http://stackoverflow.com/questions/19999388/check-if-user-is-using-ie-with-jquery/21712356#21712356
from simple-text-rotator.
Any news from the author? I'd like the issue to be fixed please.
from simple-text-rotator.
No it's not @renoovodesign, but you can check the other messages in this thread for solutions / alternatives.
from simple-text-rotator.
Related Issues (20)
- Delay start of rotation
- Rotating text over CSS3 gradient background
- jquery dependency HOT 7
- Conflict with Foundation / Wordpress? HOT 1
- Delay start? And stop on last word? HOT 3
- Conflict with parallax HOT 1
- animate width of the containing span HOT 2
- Keeping anchor tags HOT 2
- PLEASE MAKE THIS CHANGE TO YOUR DOCUMENTATION. Thanks. HOT 2
- Chrome Display Issue HOT 1
- Add package to bower HOT 1
- Add a destroy function HOT 1
- Fade : Text appearing in this array order : 0,2,4,1,3 HOT 1
- flip difference Edge vs Chrome
- Space between words causes strange behaviour when rotating to the next word in orde HOT 1
- Small Issue When Tabbing Out
- Only Odd Items are Show when Fade is Selected as Transition Type HOT 1
- Does not work...
- Suggestion: adding css to class front
- This plugin skips ever other word HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from simple-text-rotator.