I want to zoom out my website when the screen resolution is on 1366*768
the website looks very zoomed-in when chrome is zoom on 100%
I tried
html {
zoom:80%;
transform: scale(1)
transform-origin: 0 0;
}
but nothing works.
Please any help!
You can try this css code. It works with current versions of Chrome, FF, Safari and IE.
html {
zoom: 0.8;
-moz-transform: scale(0.8);
-moz-transform-origin: 0 0;
}
Related
I have an animation on my home page where my logo spins into place. On desktop and both the Chrome and Firefox mobile simulators it works fine but on an actual phone it makes an additional 90deg rotation. Here are screenshots from firefox mobile view and my iphone
This is correct
This is incorrect (iphone)
and the code
#keyframes spin { 100% { transform:rotate(720deg); } }
#keyframes size {
0% { opacity: 0; transform: scale(0); }
30% { opacity: 0; transform: scale(0); }
100% { opacity: 1; transform: scale(1); }
}
Turns out the issue wasn't code related, but rather the Apple browser was reading the image metadata in a particular rotation. The fix was to create a new logo in the correct orientation from the start and now it works fine. I think I may have rotated that last image in the apple viewer after it was exported from Inkscape.
So the desktop browser was seeing the image as is was after rotation and the mobile browser (Apple in this case) was reading the image data and not taking into account the fact that it was rotated.
I made a little CSS animation with a simple svg to transition my hamburger menu to a cross. It works as expected on Chrome and Firefox, but the translation is off in Safari. The animation plays, and even resets correctly so it has nothing to do with prefixes (I tried). The translate of the two lines making the cross is just wrong.
I'm guessing it has something to do with how safari handles the transform when scaling is also applied. Does anyone know if there is a work around / or what I'm doing wrong?
JSFiddle
Safari / Firefox / Chrome
#keyframes showCross {
0% {
transform: scale(1) rotate(0);
}
40% {
transform: scale(0.3) rotate(280deg);
}
100% {
transform: scale(1) rotate(360deg);
}
}
#keyframes showCross_P1 {
0% {
transform: rotate(0);
}
100% {
transform: rotate(-45deg) translate(-42%, -10%);
}
}
I fixed it by doing the following:
First I removed the groups surrounding the paths.
Then I gave all the paths the following values:
transform-origin:center center;
transform-box: fill-box;
Next I edited the animation keyframes to look as follows:
0% {
transform: translate(0rem,0rem) rotate(0);
}
100% {
transform: translate(-10rem,-38rem) rotate(-45deg) ;
}
Safari has problems with percents and also if you put the rotation before the translate it has inconsistency with other browsers, use rem instead!
For a particular case, I have to zoom out on the whole body of a web page.
So I took the time to search the various possible solutions but I'm faced with a compatibility problem with the zoom CSS property that doesn't work on Mozilla. I quickly encountered the scale property but it doesn't offer the same desired result, i. e. the equivalent of a conventional zoom out (CTRL -).
Do you know an equivalent technique that works on the main browsers ?
Thank you in advance for your feedback !
https://caniuse.com/#search=zoom
This will tell you what is compatable for each browsers. Not a solution but this is why it's not working in moz.
Just a little searching comes up with using this
.zoom {
zoom: 2;
-moz-transform: scale(2);
-moz-transform-origin: 0 0;
-o-transform: scale(2);
-o-transform-origin: 0 0;
-webkit-transform: scale(2);
-webkit-transform-origin: 0 0;
transform: scale(2); /* Standard Property */
transform-origin: 0 0; /* Standard Property */
}
That should do what you're after :)
I tried to change the size of the paper-checkbox by changing the width and height attributes in my css-file, and by using transform: scale(2,2)
Scale makes it blurry, width and height only changes the clickable area.
How would I achieve this?
I think you found the correct solution already. You can't change the resolution, therefore there's nothing you can do.
For those who don't care about the blur, here's the css:
paper-checkbox
{
/* Double-sized Checkboxes */
-ms-transform: scale(2); /* IE */
-moz-transform: scale(2); /* FF */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
padding: 10px;
}
In polymer 1.0 and paper-checkbox 1.2 it works with this simple style
paper-checkbox {
--paper-checkbox-size: 30px;
}
When I was first trying to use paper-checkbox bower installed version 1.0 for me. And this version had issues. So maybe this might be the case for you as well.
I am trying to move a search box widget on a WordPress page by using translate (since it be put there by default). The code below works on all of the major browsers except Safari both the desktop and mobile versions. The code is below:
input#s {
-ms-transform: translateY (85px);
-webkit-transform: translateY (85px);
-moz-transform: translateY (85px);
-o-transform: translateY (85px);
transform: translateY(85px);
z-index: 1000;
position: relative;
display: inline-block;
}
Thanks for any help.
Is there a reason you have spaces after translateY on all of them but the non-prefixed? That's what I'd venture the issue is.
It's reading the translateY but you have "no value" attached to it due to the spaces.