How can I zoom an HTML element in Firefox and Opera?
The zoom property is working in IE, Google Chrome and Safari, but it’s not working in Firefox and Opera.
Is there any method for adding this property to Firefox and Opera?
Try this code, this’ll work:
-moz-transform: scale(2);
You can refer to this.
Zoom and transform scale are not the same thing. They are applied at different times. Zoom is applied before the rendering happens, transform - after. The result of this is if you take a div with width/height = 100% nested inside of another div, with fixed size, if you apply zoom, everything inside your inner zoom will shrink, or grow, but if you apply transform your entire inner div will shrink (even though width/height is set to 100%, they are not going to be 100% after transformation).
For me this works to counter the difference between zoom and scale transform, adjust for the intended origin desired:
zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform: scale(0.5,0.5);
-moz-transform-origin: left center;
Use scale instead! After many researches and tests I have made this plugin to achieve it cross browser:
$.fn.scale = function(x) {
if(!$(this).filter(':visible').length && x!=1)return $(this);
if(!$(this).parent().hasClass('scaleContainer')){
$(this).wrap($('<div class="scaleContainer">').css('position','relative'));
$(this).data({
'originalWidth':$(this).width(),
'originalHeight':$(this).height()});
}
$(this).css({
'transform': 'scale('+x+')',
'-ms-transform': 'scale('+x+')',
'-moz-transform': 'scale('+x+')',
'-webkit-transform': 'scale('+x+')',
'transform-origin': 'right bottom',
'-ms-transform-origin': 'right bottom',
'-moz-transform-origin': 'right bottom',
'-webkit-transform-origin': 'right bottom',
'position': 'absolute',
'bottom': '0',
'right': '0',
});
if(x==1)
$(this).unwrap().css('position','static');else
$(this).parent()
.width($(this).data('originalWidth')*x)
.height($(this).data('originalHeight')*x);
return $(this);
};
usege:
$(selector).scale(0.5);
note:
It will create a wrapper with a class scaleContainer. Take care of that while styling content.
I would change zoom for transform in all cases because, as explained by other answers, they are not equivalent. In my case it was also necessary to apply transform-origin property to place the items where I wanted.
This worked for me in Chome, Safari and Firefox:
transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;
zoom: 145%;
-moz-transform: scale(1.45);
use this to be on the safer side
Only correct and W3C compatible answer is: <html> object and rem. transformation doesn't work correctly if you scale down (for example scale(0.5).
Use:
html
{
font-size: 1mm; /* or your favorite unit */
}
and use in your code "rem" unit (including styles for <body>) instead metric units. "%"s without changes. For all backgrounds set background-size. Define font-size for body, that is inherited by other elements.
if any condition occurs that shall fire zoom other than 1.0 change the font-size for tag (via CSS or JS).
for example:
#media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
This makes equivalent of zoom:0.5 without problems in JS with clientX and positioning during drag-drop events.
Don't use "rem" in media queries.
You really doesn't need zoom, but in some cases it can faster method for existing sites.
I've been swearing at this for a while. Zoom is definitely not the solution, it works in chrome, it works partially in IE but moves the entire html div, firefox doesnt do a thing.
My solution that worked for me was using both a scaling and a translation, and also adding the original height and weight and then setting the height and weight of the div itself:
#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;
Obviously change these to your own needs. It gave me the same result in all browsers.
It does not work in uniform way in all browsers.
I went to to: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage and added style for zoom and -moz-transform. I ran the same code on firefox, IE and chrome and got 3 different results.
<html>
<style>
body{zoom:3;-moz-transform: scale(3);}
</style>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" />
</body>
</html>
try this code to zoom the whole page in fireFox
-moz-transform: scale(2);
if I am using this code, the whole page scaled with y and x scroll not properly zoom
so Sorry to say fireFox not working well using "-moz-transform: scale(2);"
**
Simply you can't zoom your page using css in fireFox
**
does this work correctly for you? :
zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);
For me this works well with IE10, Chrome, Firefox and Safari:
#MyDiv>*
{
zoom: 50%;
-moz-transform: scale(0.5);
-webkit-transform: scale(1.0);
}
This zooms all content in to 50%.
Related
Here's a fiddle.
.box:hover {
-moz-transform: rotate3d(0,1,0,180deg);
-webkit-transform: rotate3d(0,1,0,180deg);
-ms-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
}
I'm using some CSS3 to get the card flip effect on some parts of my site. I have no issues with this in any Windows browsers, but I'm getting reports from some Mac users that the rotation is getting stuck and won't flip over completely. It looks like in those browsers, when doing a 3d transformation it appears that the "hitbox" for hover is transformed along with the element and content (as it gets close to rotating 90 degrees, the hitbox for the element approaches 1px width).
I could be wrong about what's happening or maybe there's a better fix than what I have in mind, but I was looking to hopefully work around this issue by causing the full transition/animation to play out as soon as the mouse triggered the hover. This way, even if the hitbox for the hover does change size, the elements will finish flipping over.
Is this possible with just CSS3? Or should I look into a javascript solution?
Wrap it with a wrapper and put the hover on the wrapper. I tested on FF and chrome on Mac
https://jsfiddle.net/6udv405h/3/
.wrapper:hover .box {
-moz-transform: rotate3d(0,1,0,180deg);
-webkit-transform: rotate3d(0,1,0,180deg);
-ms-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
}
HTML
<div class="wrapper">
<div class="box"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.box').mouseover(function () {
var box = $(this)
$(box).addClass('hovered');
setTimeout(function () {
$(box).removeClass('hovered');
}, 1000);
});
});
</script>
Little bit of Jquery solved my issue. I would still have preferred to use only CSS, so please reach out to me if you have a better solution without using JS.
I have a WordPress website where I use Visual Composer with fullpage sections. I've added a zooming background using CSS. It's on the following URL: http://white-vision.nl/particulier/
.upb_row_bg {
animation: leaves 20s infinite;
}
#keyframes leaves {
0%, 100% {
transform: scale(1.0);
}
50% {
transform: scale(1.1);
}
}
It looks like it works great, but in Google Chrome when scrolling up (so from 3rd to 2nd section) it gets a white transparent overlay and the videobox is pushed down. When you scroll down (so from 1st section to 2nd section) everything works fine.
This is only a problem in Google Chrome (on Mac and Windows). It works fine in Firefox, Edge and Safari. Does anyone have an idea how to fix this? Thanks in advance!
PS: When deleting the zoom function, there is no problem.
The parent element with classes fp-tableCell vc_row-has-fill is getting a change on its inline styles. One of the properties that are been changed is opacity: 0.107967. This is what makes your background look transparent.
You should try to access this element via javascript and force it to stay at opacity: 1. If you are not able to do that via script, you could force that elements' opacity by adding:
.vc_row-has-fill {
opacity: 1 !important;
}
This will overwrite the changing opacity on the inline styles.
OK so I am looking for truly responsive percentage image resizing that is independent of the container. In other words I want to resize the image relative to it's own size.
The reason is so I can dynamically resize all images on a page for smaller screen sizes.
Now as this it to be used for a CMS solution for and the users are assumed HTML non-savy, we can't wrap the images with anything, we can't add a class/ID to them etc.
I will want to change all images on the page EXCEPT a certain few that I can apply classes or IDs to.
I am currently using:
img {
-webkit-transform: scale(0.625) translate(-29%, 0); /* Saf3.1+, Chrome */
-moz-transform: scale(0.625) translate(-29%, 0); /* FF3.5+ */
-ms-transform: scale(0.625) translate(-29%, 0); /* IE9 */
-o-transform: scale(0.625) translate(-29%, 0); /* Opera 10.5+ */
transform: scale(0.625) translate(-29%, 0);
/* IE6–IE9 */
/*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');*/
}
.noScale, .userFeed img, .twitter img, .subLogo {
-webkit-transform: scale(1) translate(0,0); /* Saf3.1+, Chrome */
-moz-transform: scale(1) translate(0,0); /* FF3.5+ */
-ms-transform: scale(1) translate(0,0); /* IE9 */
-o-transform: scale(1) translate(0,0); /* Opera 10.5+ */
transform: scale(1) translate(0,0);
/* IE6–IE9 */
/*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');*/
}
This mostly works, BUT all image are still seen as being their original size by everything else, so it effectively gets padding around it to it's original size. Which is not a massive problem with a 62% reduction in size, but become a bigger problem as the reductions get smaller. Also obviously there need to be several implementations of media queries to deal with smaller and smaller screen sizes.
The translate is in there so the left edge of the image is still the left edge of the image.
I will consider JS/JQuery solutions, but really I want a CSS way of doing this that is compatible with modern browsers. So ie9+.
Before you suggest any of the following, the don't work from my testing, but I am happy to be proved wrong:
max-height/max-width (they still size against the container in some browsers)
Zoom (not fully support, would be perfect if it was)
height/widht (container size not image)
Div wrapper (no good for what I am trying to do)
If I am being totally thick and approaching this completely the wrong what, no problem, just tell me please. Any help would be massively appreciated.
Thanks
Stephen
OK, so I am using this JQuery to do the resizing for me now, with the above CSS in a wrapper.
<script>
$( document ).ready(function() {
if (document.documentElement.clientWidth < 700) {
$("img").hide();
}
$( window ).load(function() {
if (document.documentElement.clientWidth < 700) {
$('img:not(".noScale, .subLogo")').each(function() {
$( this ).css("width", "auto" );
$( this ).css("width", this.width * ( $( document ).width() / 700));
$( this ).css("height", "auto" );
$( this ).show();
});
}
$("img").show();
});
$( window ).resize(function() {
if (document.documentElement.clientWidth < 700) {
$('img:not(".noScale, .subLogo")').each(function() {
$( this ).css("width", "auto" );
$( this ).css("width", this.width * ( $( document ).width() / 700));
$( this ).css("height", "auto" );
});
}
if (document.documentElement.clientWidth > 700) {
$('img:not(".noScale, .subLogo")').each(function() {
$( this ).css("width", "auto");
});
}
});
});
</script>
AS I am sure you can tell I am no JQuery expert, but it work.
It hide the images (because it looked terrible seeing them suddenly resize, and if you try it before the page loaded, sometimes the image sizes were empty).
Then it resizes them on some percentage calculation I decided on.
Then it shows them.
It hides and shows all the images, again because otherwise it just looked silly.
The setting of width to auto before the calculation is because otherwise it uses the already reduced image size, and that messes up the calculations.
It also does it all again on a window resize, but doesn't hide anything.
It can be slow to load on a mobile sometime, but once loaded, and switching between land and port, I couldn't see any delay.
Anyway it works for my needs, for now.
Would be great if anyone has a better solution. Because this is still not perfect, and I love perfect.
Anyone wants to tidy up/speed up my JQuery I won't object.
Thanks
Stephen
I've come across a severe problem I can't solve..
I created an accordion element with the jQuery Plugin easyAccordion.js. While I was developing and looked over it in Firefox it worked well - until I openend it in Chrome. There you can see that the rotated text is unclear and certainly blurred, even though it has the same formatting as the un-rotated text at the top. Same for Safari.
I created a jsfiddle that sortof recreates my issue (look at it in Chrome or Safari)
.
..
http://jsfiddle.net/SfKKv/427/
..
.
This is what I'm using to rotate the text:
-webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(-90deg); /* Firefox 3.5-15 */
-ms-transform: rotate(-90deg); /* IE 9 */
-o-transform: rotate(-90deg); /* Opera 10.50-12.00 */
transform: rotate(-90deg);
The JSFiddle is not fully working in Firefox, but that's not important here, I have it working on the website I created it in, but even the sortof broken Fiddle in FIrefox shows that it can display the rotated text a lot better.
I've found some hints towards font-smoothing and some 3d Parameters, but none seemed to work for me.
Can anyone help me with this issue?
OK, so after trying out some uncommon things I've found a fix that is not 100% perfect/accurate but good enough for me.
Here's the updated JS Fiddle, again, use it in Chrome or Safari. Use the red Hover box to see the magic in action.
http://jsfiddle.net/SfKKv/627/
All I do is change the -webkit-transform-origin from its default value (50% 50%) to something close enough such as
-webkit-transform-origin: 50% 51%;
When you try out the fiddle, you'll see it moving by that one percent. However, that's still better than the blurred text.
I found this by pure trial and error and I still don't know why the text suddenly turns sharp. If someone can explain me this behavior, let me know!
I believe this has something to do with the way Chrome is rendering the transform. The best way to see what I'm going to talk about is by going to chrome://flags/ and enabling Composited render layer borders. Now, go to the fiddle with a fix that you posted. You'll notice an orange border around several elements on the page. This border is there because it shows these elements are given their own layer when being rendered on the page.
Start tweaking the widths of the dt elements in your <dl class="easy-accordion"> using the Chrome inspector tool. The text will become blurry/clear depending on whether the width is even/odd. What appears to be happening here is the layer is being composited to a half-pixel location which is then being rendered to create the appearance of being "between" two pixels.
This is also the issue with Safari (and WebKit in general).
Check out http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome for more info.
This problem occurs when a background color is not defined for IE versions 8 and 9 and maybe some versions of Chrome (I didn't see this issue in Chrome)
Adding background-color: white; (or any color you want) to your css rotate class solves the problem.
-webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(-90deg); /* Firefox 3.5-15 */
-ms-transform: rotate(-90deg); /* IE 9 */
-o-transform: rotate(-90deg); /* Opera 10.50-12.00 */
transform: rotate(-90deg);
background-color: white; /* fix blurry text in ie8, 9 */
I had a similar issue, the problem was having perspective in body and the rotated div. It happened only in Safari on mac. Chrome worked fine.
body {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-family: 'Varela Round', sans-serif, Helvetica;
transform-style: preserve-3d;//bad
perspective: 1200px;//bad
-webkit-text-size-adjust: none
}
removing the perspective from body saved me! Indeed I used perspective twice, in body and in another rotated div, which probably caused a hard to kill pixelations, even SVG and text were pixelated.
transform-style: preserve-3d;
perspective: 1200px;
removing the above styles from body saved me.
I have an image built from multiple css sprites, as described in this question: css image building with sprites
How would I use that so that I could apply a size on the top container that would dynamically re-size all the children?
here is the working fidlle so far: http://jsfiddle.net/hWhUb/3/
here is the current html structure:
<div class="icon">
<div class="brigade brigade-purple-left"> </div>
<div class="brigade brigade-purple-middle"> </div>
<div class="brigade brigade-purple-right"> </div>
<div class="icon-type icon-hero"> </div>
</div>
I have a few questions, that might lead to a solution:
Why are you using multiple images for something that can be easily achieved using a bit of css3 and a single image (the cross thingie)? A single image can more easily be resized, as a percentage of the container width, or even using css3 background-size property.
If you must use images for each thing, could you possibly consider never using sprites, ever? Its maintainability is pure annoyance, especially if someone has to take the project away from you later on.
Perhaps a combination of both?
If you choose the second option, I suggest using data uris.
Here's a short explaination:
http://css-tricks.com/data-uris/
It saves one more http request than sprites, easier to maintain, and the difference in overall size is rather insignificant in my honest opinion, and support is great - IE8+ and all sane browsers our there.
Setting up is easy enough, especially if you use the all-mighty sass interpreter, but there are some nifty utils out there (command-line, gui or even web-based) to transform your images into base64.
It can even support IE7 with a little effort!
Edit 3.11.12
You can also add http://css3pie.com/ to the options to check out - it lets you do the css3 tricks we so love and adore with internet explorer. It's a bit unpredictable to my taste, but for a small feat like this it can definitely do the trick.
Further, I commented on your browser-support needs below. IE7 is not what's going to stop you;)
You can use a combo of zoom for webkit/ie and -moz-transform:scale for Firefox
[class^="icon-"]{
display: inline-block;
background: url('../img/icons/icons.png') no-repeat;
width: 64px;
height: 51px;
overflow: hidden;
zoom:0.5;
-moz-transform:scale(0.5);
-moz-transform-origin: 0 0;
}
.icon-huge{
zoom:1;
-moz-transform:scale(1);
-moz-transform-origin: 0 0;
}
.icon-big{
zoom:0.60;
-moz-transform:scale(0.60);
-moz-transform-origin: 0 0;
}
.icon-small{
zoom:0.29;
-moz-transform:scale(0.29);
-moz-transform-origin: 0 0;
}
One of the ways to achieve it will be to use inline CSS and to dynamically generate attribute values in JavaScript or PHP/What you use.
Assuming you know the width of the top container and the position of the css sprites
Calculate the left middle and right
You can also opt to generate the CSS code in a separate file
http://aquagraphite.com/2011/11/dynamically-generate-static-css-files-using-php/
Using a bit of jQuery I can make the elements resize to whatever you want (resizeTo):
$(document).ready(function () {
$('#resize').click(function (e) {
e.preventDefault();
var resizeTo = 100,
resizeRatio = Number(resizeTo) / Number($(".icon").width());
$(".icon").css('width', resizeTo);
$(".child").each(function () {
var childWidth = Number($(this).width()),
childHeight = Number($(this).height()),
newChildWidth = childWidth * resizeRatio,
newChildHeight = childHeight * resizeRatio;
$(this).css({ 'width': newChildWidth, 'height': newChildHeight });
});
});
});
However, size doesn't resize the sprites to fit the new box sizes so seems like a pointless task.
Fiddler: http://jsfiddle.net/hWhUb/4/
Though what you want to do can be accomplished, I think your approach is wrong. It's way more complicated than it needs to be, but the idea is sound.
Looking at your sprite, the only thing that can't be changed with CSS is the actual icons (the artwork). The rounded corners and background colors -- that's a different story.
CSS
.icon-cross {
background:purple url('cross.jpg') no-repeat 40px 12px;
border-radius:5px;
border:1px solid gray
}
#media only screen and (max-width:768px) {
.icon-cross {
background-size: 800px 1200px;
background-position; ??px ??px
}
}
#media only screen and (max-width:400px) {
.icon-cross {
background-size: 500px 900px;
background-position; ??px ??px
}
}
HTML
<div class="icon-cross"></div>
You can use css3 2d transforms:
.icon {
transform: scale(2);
-ms-transform: scale(2); /* IE 9 */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
-moz-transform: scale(2); /* Firefox */
}
and change the transform origin with: transform-origin