Edge browser issue when using scale css - javascript

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.

Related

Chrome Zoom Set To 100% Using Selenium C#

I am using below code in selenium c# to make chrome browser zoom to 100% using javascript.but its not working please help
var js = ((IJavaScriptExecutor)driver);
js.ExecuteScript("document.body.style.zoom = '100%';");
Zoom is a non-standard property, so it's not supported by all browsers.
I'd use transform scale instead, which is supported by all browsers.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
You will need to use prefixes for different browsers, see http://shouldiprefix.com/#transforms
.example {
-webkit-transform: scale(1); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: scale(1); /* IE 9 */
transform: scale(1); /* IE 10, Fx 16+, Op 12.1+ */
}
For your chrome use case, you would use:
document.body.style.webkitTransform = 'scale(1)'

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

Make a DIV and all children elements smaller

I want to re-size a part of HTML in my design.
I need this change to happen as an animation.
The DIV itself and all it's inner elements i.e. Images, Paragraphs, Anchors etc should be re-sized just like when you re-size an image with a constant aspect ratio.
I think, the tool should get current height and width of element and increase/decrease them, but it won't work for texts, actually for a text element you need to change font size.
How can I do this in JS, CSS, HTML?
You can use CSS transform:scale
.small {
transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8); /* IE 9 */
-webkit-transform: scale(0.8, 0.8); /* Safari and Chrome */
-o-transform: scale(0.8, 0.8); /* Opera */
-moz-transform: scale(0.8, 0.8); /* Firefox */
}
EDIT: reference/credits: Shrink/Grow animation using jQuery/CSS

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); }

Cross-browser way to flip html/image via Javascript/CSS?

Is there a library/simple way to flip an image?
Flip image like this:
AABBCC CCBBAA
AABBCC -> CCBBAA
I'm not looking for animations, just flip the image.
I've googled to no avial and only found a complex version that utilized SVG on MozillaZine which I'm not confident that it'll work cross-browser.
The following CSS will work in IE and modern browsers that support CSS transforms. I included a vertical flip class just in case you might want to use it too.
.flip-horizontal {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph;
}
.flip-vertical {
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv; /*IE*/
filter: flipv;
}
Take a look at one of the many reflection.js type libraries, They are pretty simple. In IE they will take and use the 'flipv' filter, there is a 'fliph' filter too. Inside of other browsers, it will create a canvas tag and use the drawImage. Although Elijah's answer probably supports the same browsers.
Just dug up this answer while trying to fix a bug, while the suggested answer is correct I have found that it breaks most modern CSS Linting rules regarding the inclusion of all vendor rules for the transform. However, including the -ms-tranform rule causes an odd bug in IE9 where it applies the filter and -ms-transform rules causing an image to flip and flip back again.
Here is my suggested improvement which also supports CSS Lint rules:
.flip-horizontal {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
-ms-transform: scaleX(1); /* linting rule fix + IE9 fix */
transform: scaleX(-1);
-ms-filter: fliph;
filter: fliph;
}
.flip-vertical {
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
-ms-transform: scaleY(1); /* linting rule fix + IE9 fix */
transform: scaleY(-1);
-ms-filter: flipv;
filter: flipv;
}
If you only want to flip a background image you can use the class on the internal elements inside a flipped div. Basically you're flipping the internal elements with the main div, but flipping each of them back. Works in Firefox anyway.
Like this:
<div id="container" class="flip-horizontal"> <!-- container would have your background image -->
<h3 class="flip-horizontal">Hello There!</h3>
<p class="flip-horizontal">Here is some text</p>
</div>

Categories