Hoping someone can steer me in the right direction as I've been trying to accomplish this task for a few hours and can't seem to come up with a working cross-browser combination of CSS / Javascript.
Basically, what I am trying to do is a "Card Flip" using CSS and Javascript.
The code works wonderfully in Google Chrome, but I can't seem to get it to work in IE9/10.
Here is a sample jsFiddle.
When viewing the same jsfiddle in IE10, you only see the back side of the card and the animation does not work.
Any suggestions?
Ignore this - need a code snippet to post the above jsFiddle link.
The jsFiddle sample is only working for Chrome (more precisely, webkit browsers).
This is quite logic, as only css -webkit properties are used here.
The Card Flip animation you want to use should also work perfectly for IE10 (And Firefox even not mentioned in your question)
Check out the W3school page for more details on the 3D Transforms CSS properties you'll need to use.
Now the problem: IE9.
IE9 do not provide CSS animations. You'll have to use a fallback
with Javascript (jquery animate).
IE9 do no provide rotatey possibility. BUT, it provides flipX.
Yes, you will not have the 3D effect, but you'll still have the
flip effect.
The IE9 flip property is
filter: FlipH;
-ms-filter: "FlipH";
Related
I'm currently using a table structure with the native HTML5 Drag&Drop functionality. I'm applying some "transform" CSS to the table.
The problem here is that after applying "transform" property on the element, if I try to drag&drop via Firefox, the ghost image is positioned far of the cursor ( as I can see, on its original position).
Its working fine on Chrome and Edge, but Firefox gives this bug.
Do you know anything I can try so I can modify the position of the ghost image or fix this issue?
JSFiddle: https://jsfiddle.net/6j3fbq17/
Thanks!
transformations are different for firefox than they are for chrome.
I haven't read your code completly, but i assume that the problem is that you forgot to add a fallback variant for mozilla.
firefox needs a special prefix, e.g. -webkit-transform: translate(100px) rotate(20deg);
taking a look at this might help.
So I've been working on browser compatibility. Unfortunately, when I first designed my site, I desigend the CSS aesthetically for Firefox only. Now I'm having all sorts of trouble trying to get it to look good in the other major browsers. However, when I fix the CSS positioning such as floating a box object to the right, IE8 forces it left. I checked my code on W3C and it's okay semantically. I use little to no javascript. It's a portfolio website. The screensize shifts everything around no matter what browser, yet there is no perfect CSS for this so how does one get things to stay in place? I'm not too familiar with JQuery, but this seems to be the closest I can get to an answer. Where would I plug this into my site to see if this works?
On my website, I experience - and a lot of others do on theirs - a kind of jumping/lagging effect with Internet Explorer 11 (on a Windows 8.1 machine) when creating a parallax. On Firefox for example it is working absolutely fine.
According to my research, this is a common problem with IE11 that has no solution, but I have found a website that somehow fixed the issue (or made a Workaround?!?) :
http://focuslabllc.com/journal
But my website has the same issue as this one:
http://negativespacealphabet.com/
What are they doing differently to get it work? I appreciate your help!
Best solution I have seen to this issue is to use transition on whatever properties you are using to create the parallax.
Example, you use transform:translateY to create a parralax effect, then add:
transition:transform 10ms linear
This forces the parralax to animate smoothly.
Downside, its not fully backward compatible with older browsers
I want to use transition effect on hover for IE 8 like in this example:
http://jsfiddle.net/evcL2/10/
According to this site (is working only on ie) that is possible (use trasntion option and fade effect) but I am not able to use it. Can someone help me a little bit with that script, for me is simportant to have that transition on hover only for background color.
Thank you.
IE8 doesn't support CSS3 transitions. You'll have to fake it using JavaScript tweens, or settle for IE9 support. IE8 users don't deserve nice looking websites anyway :-)
But if you're in the awkward position of being tasked with creating IE compatible stuff, take a look at this MSDN introduction to Filters and Transitions. It appears that even the IE specific transition filters require JavaScript to work, so you might as well go with the proper JavaScript solution of using jQuery.animate. With a small plugin it can animate colors. Here's an example on JSFiddle.
For some reason the website you suggested doesn't render properly in my browser. However, I think you may be attacking the problem wrongly. I would use jQuery's $.animate() function for this, as it is very cross browser and can animate gradual changes in many css properties.
I'm working on an example of a jQuery notification bar that you can see here: jQuery notification bar example
But for whatever reason the CSS I'm using to define transparency in IE 7 and 8 is not working. If you look at the example in IE 7/8, you will see that the transparency for the .png close button and the transparency for the "reopen" element does not work.
I've successfully defined an element's transparency in IE using this code before, but I can't figure out why it's not working in this example.
I thought I might have hit on something when I read this post, but after trying out the solutions mentioned with the hasLayout property I still didn't have any luck.
Any help would be greatly appreciated. Let me know if you need any additional details.
Thanks!
Wow somebody else just asked a question about this. In older versions of IE, you can't compose transparency from a PNG alpha channel with transparency from a CSS effect. As soon as you apply the style, it quits trying to do transparency from the image.
Yes, it's profoundly lame.
opacity: 0.50;
filter:alpha(opacity=50);
This fixes opacity for IE. Using 50% transparency as example value here.
As for the hellobar_close, give it a background-color and it should work. IE has poor support for transparency in .png images.
OK I believe that with the help of the answers provided above and some additional research on my own I have answered my question.
There are actually 2 parts to this problem:
1.) Transparency issues with the .png close button in IE - This part was answered by Pointy above. According to Pointy "The browser is incapable of managing the compositing of the transparent PNG concurrently with any opacity effect on the image. In other words, for any given pixel, you either get alpha channel effects from the PNG itself, or from an opacity filter, but not both." (Quote taken from his answer at IE7 and "jaggies" around layered PNGs (with jQuery))
What I want to happen is for the .png close button to be semi-transparent in it's normal state, and full opacity in its hover state, but apparently this is not possible to achieve in IE using only one single image and CSS transparency. So to get around this I'm just going to have to make a dual-state .png image to get a nice hover effect, rather than relying on CSS transparency to handle that component.
2.) Transparency issue with the "reopen" button - This button should be semi-transparent but did not work in IE. After doing some extensive research on my own I came across this post: jquery IE Fadein and Fadeout Opacity. woodstylee's answer in that post solved my problem.
Due to some weird IE bug that I don't completely understand, I need to declare the element's opacity using jQuery/javascript before any transition/fade effects are applied.
Obviously there is some kind of conflict with jQuery fades/transitions and CSS opacity in IE. If anyone else has some additional info on this subject please post!
When I updated my code with the following, I was able to successfully get my "reopen" button to appear semi-transparent in IE.
$('#hello_mini').css('filter', 'alpha(opacity=75)');
Note that the above line of code needs to be placed before this line:
$('#hello_mini').show('slow');
Also of note... this IE bug appears to only apply to the jQuery show() and hide() functions. When I switch the animation to slideUp() or slideDown() the transparency works fine without any additional javascript.
So bottom line... there is something weird going in with CSS transparency in IE when applied to elements animated through jQuery show() and hide()
If I find out anything else in my research I will post it here.
Here is a link to my updated example, which works in IE 7/8 now.