Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IE Issues #4

Open
Insufficient opened this issue Apr 23, 2013 · 5 comments
Open

IE Issues #4

Insufficient opened this issue Apr 23, 2013 · 5 comments

Comments

@Insufficient
Copy link

When you press the left arrow key, this appears.

image

@owlmsj
Copy link

owlmsj commented Jul 4, 2013

Looks like the dimmer isn't gone after hide animation. Tried twice to fix but that is a hard one.

@ryan76
Copy link

ryan76 commented Dec 21, 2013

I was able to work around the dimmer not going away by transitioning the height attribute from 100% to 0% and delaying the transition for the height only. It's not a perfect solution, but it may work for you if you play around with the delay time a bit:

.kontext.capable.animate .layer .dimmer {

-webkit-transition: background 1s ease, border-color 1s ease, height 1s ease-out 1.8s;
   -moz-transition: background 1s ease, border-color 1s ease, height 1s ease-out 1.8s;
        transition: background 1s ease, border-color 1s ease, height 1s ease-out 1.8s;                          

}

.kontext.capable.animate .layer.hide .dimmer {
visibility: visible;
background: rgba( 96, 100, 99, 0.5 );
border-color: #606463 ;
height: 0%;
}

@rhermann
Copy link

Is it possible for IE 11 (or 10) to have the 3d effect like in FireFox 25? Instead of zooming in and out.

@ryan76
Copy link

ryan76 commented Jan 20, 2014

I have not tried it yet, but it looks like you can create the same effects in IE 11. You can take a look at Microsoft’s API documentation: http://msdn.microsoft.com/en-us/library/ie/ms531209 to get information about their css properties. For most of the effect to work, you will need to add Microsoft’s vendor prefix, -ms-, to the css and js files anywhere where you see vendor prefixes for Safari or Mozilla:

-ms-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
-webkit-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
-moz-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);

You can check Microsoft’s documentation to make sure all of the properties have the same naming schemes, but just from looking at them briefly, it looks like they are uniform.

On Jan 20, 2014, at 8:08 AM, Robert Hermann [email protected] wrote:

Is it possible for IE 11 (or 10) to have the 3d effect like in FireFox 25?


Reply to this email directly or view it on GitHub.

@rhermann
Copy link

Thanks, I did it, but it works not 100% correctly because of IE does not support preserve-3d know: http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property. I try to fix it with the advise of MS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants