We Keep Coding

Edge browser issue when using scale css

I have a scroll jacking on a video that scales the video container using css transform. It's working fine on all browsers however in IE and edge it does the scale transform but the video gets pixelated when the video is scaling up.
CSS
transform: translateY(0) scale(3,3);
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;

Try this
-webkit-transform: translateY(0) scale(3,3);; /* android, safari, chrome */
-moz-transform: translateY(0) scale(3,3);; /* old firefox */
-o-transform: translateY(0) scale(3,3);; /* old opera */
-ms-transform: translateY(0) scale(3,3);; /* old IE */
transform: translateY(0) scale(3,3);; /*standard */

I suggest you to refer links below may give you some more information.
transform property
CSS Demo: transform
If still not work then I suggest you to provide your full sample code.
We will try to make a test with it and try to find a solution for it.

How to create a navigation menu around an image

I have a heart and I need to construct the menu around that heart on both sides I have over 27 menu items.
I need it to be mobile friendly. Please any help?

You can use the transforms declarations of css to rotate the <span> of text.
http://www.w3schools.com/cssref/css3_pr_transform.asp
span#menu1 {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}

Browser Zoom to 75% when application loads on 1024x768

My application looks better when browser zoomed to 75% in IE 9.
When resolution is 1024x768 .
Can i make the IE 9 browser to zoom to 75%.
I tried with media queries.
#media (min-width : 980px) and (max-width: 1199px) {
.zoo {
transform: scale(0.75);
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-ms-transform: scale(0.75);
-ms-transform-origin: 0 0;
}
}
Added this css class to body.But it dosen't work

So you want to apply manual browser zooming using CSS and/or JS?
This is really not possible with CSS and/or JQuery. Manual browser
zoom and CSS zoom property both work differently and will produce
different results.
Alternative: On page load provide users with a modal window
instructing them how to manually Zoom in/out, close it after they have
zoomed successfully.
Source:
https://stackoverflow.com/a/30152402/2534513
Changing the browser zoom level

onTransitionEnd not working Android 4.3 Samsung S3

I have a small nifty game I'm trying to develop at this link which has css transition class definitions
`el {
transition: transform .3s;
-webkit-transition: -webkit-transform .3s;
position:absolute;
transform: translate3d(0,-100%,0);
-webkit-transform: translate3d(0,-100%,0);
top:0;
}
.close {
transition-duration: .15s;
-webkit-transition-duration: .15s;
}
.open {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}`
on elements and uses a [prefix]TransitionEnd event to function.
$el.on(transitionEnd,function(){ // transitionEnd is a polyfill result from browser sniff
if($el.hasClass('close'))
setTimeout(function(){
$el.addClass('open');
},Math.random() * 2500));
else $el.addClass('close').removeClass('open');
});
The expected result is that the function would change the element's translate3d() based on the class add/removed each time the transition ends.
I am able to see this in action on desktop and mobile browsers except for the Samsung Galaxy S3 running Android 4.3. I was told that on the S3 that it runs only once and the elements remain with the ".close" class. I don't have an actual device but the little debugging I did is leading me to believe that the [prefix]TransitionEnd is not firing when changing the class definitions which affects the transitions. Can anyone with a Samsung S3 with Android 4.3 try it out and let me know if it works...and what workaround I can use to solve it?

Is there a meta tag or something for desktops that works like viewport initial-scale?

I know you're thinking that this is a strange request, however I am currently dealing with a client that gave me a template and decided he wanted it 70% smaller after seeing it in a browser and all the HTML done (!!!!). Thus throwing all the work that was done for both of us out the window. If I could adjust the scale to 0.7 (70%) that would be perfect and the project can still roll out the way it was going. Thank you!

body {
zoom: 0.7;
transform: scale(0.7);
transform-origin:0 0;
-ms-transform: scale(0.7);
-ms-transform-origin:0 0;
-moz-transform: scale(0.7);
-moz-transform-origin: 0 0;
-o-transform: scale(0.7);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.7);
-webkit-transform-origin: 0 0;
}

You might be able to use the CSS Zoom property but negativly? - supported in IE 5.5+, Opera, and Safari 4, and Chrome (verifed, please check before downvoting).
Firefox is the only major browser that does not support Zoom (Check here) but you could use the "proprietary" -moz-transform property in Firefox 3.5.
So you could use:
div.zoomed { zoom: 70%; -moz-transform: scale(.7); }