I can change a page element on Chrome using zoom
document.getElementById("pane-side").style.zoom = 0.5
Looks like Firefox did not support zoom, when i run the same code nothing happens.
Im searching for how to use zoom on Firefox, and i got this code:
document.getElementById("pane-side").style["-moz-transform"] = "scale(0.5)"
But the result was not what I expected:
Im trying to zoom out the element like on Chrome, any advice?
-EDIT-
The element I'm trying to zoom in is from the page web.whatsapp.com, the panel where show some contacts when you type something in the search (like on the chrome photo).
I hope you are not using this CSS property for a website in production,
the property zoom is a non-standard CSS property, originated from IE, unofficially proposed in May 2015 by Rossen Atanassov working at Microsoft.
It is unsafe to use since it will not work for every browser (and in my humble opinion, probably not going to be implemented). Unfortunately, this CSS property is not implemented in the Firefox Browser hence you are experiencing this issue.
I see that you already tried to use transform: scale(); instead,
and the difference in your screenshot is due to the fact zoom affects the layout size of the elements, while transform: scale(); does not.
You could try with the CSS at-rule #viewport, but keep in mind that this one was deprecated too (in 2020, here are the details: https://github.com/w3c/csswg-drafts/issues/4766) and probably doesn't work in Firefox either.
In your CSS file:
#viewport {
zoom: 1
}
A zoom factor of 1 or 100% corresponds to no zooming. Larger values zoom in. Smaller values zoom out.
That being said, you could also try to set bigger the font size of the target element (to have a zoomed-in effect).
If this is not enough, you could try to find a good balance between those properties.
I'll do the CSS example that might scale up all the font sizes:
body {
transform: scale(1.5);
font-size: 150%; // or any other value that is bigger than the computed value
padding: 20%; // optional spacing if some text is not visible because of the transform scale
}
zoom is not supported by FireFox.
Solutions below should work as you expect, only adjust numbers for your needs:
document.getElementById("pane-side").style.transform = "scale(0.5)";
document.getElementById("pane-side").style.transformOrigin = "left top";
document.getElementById("pane-side").style.width = "795px";
document.getElementById("pane-side").style.minHeight = "1700px";
document.getElementById("pane-side").style.alignSelf = "flex-start";
Or CSS version:
#pane-side {
transform: scale(0.5);
transform-origin: left top;
width: 795px;
min-height: 1700px;
align-self: flex-start;
}
Or eventually <style> element added with JS:
var style = document.createElement('style');
style.innerHTML = `
#pane-side {
transform: scale(0.5);
transform-origin: left top;
width: 795px;
min-height: 1700px;
align-self: flex-start;
}
`;
document.head.appendChild(style);
Does this works for you?
zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform: scale(0.5,0.5);
-moz-transform-origin: left center;
Both -moz-transform and transform should be supported in FF.
It could be because of the differences between zoom and scale.
zoom is applied pre-render and changes the layout sizing of the element.
transform is applied post-render and doesn't change the layout sizing
The easiest way to see this is with a div sized relative to a fixed element.
On zoom, everything inside the div will zoom in/out, but the div stays the same
On scale, everything 'zooms' in/out, including the div
You Can Use CSS Variables Try this
document.getElementById("pane-side").style.setProperty('--zoom', '0.5');
*{
transform: scale(var(--zoom));
}
<h1 id="pane-side" >Firefox</h1>
Related
I have a div, on which I am applying css3 transform to make it look 3d & these transforms change as per the mousewheel events.
First look at the div (the brown board with dots) in normal state:
Now I apply this small css code to transform it!
.board-class{
transform-style: preserve-3d;
transform-origin: center top;
transform: translateY(0) rotateX(30deg);
}
you can guess what this code will do, right? But it does not work in expected way, this is how it renders on chrome:
But on Firefox this work well without issue:
Here is link to hosted site : http://www.buildactivityboard.com/how-it-works
Can anyone guide me what I am doing wrong, this seems like a silly issue but I can't find out what I am doing wrong.
Note:
Believe me, this used to work without issue on Chrome too! I don't know what happened now to cause this problem. I've checked this on Mac & Windows, behaviour remains same!
Changing the position from static to absolute fixes the issue:
.master-board .widget-board {
width: 750px;
height: 300px;
padding: 0;
position: absolute;
left: 50vw;
top: 50vh;
margin: -96px 0 0 -375px;
z-index: 1000;
transition: all 1.5s;
}
https://bugs.chromium.org/p/chromium/issues/detail?id=20574
Either adding perspective: 1000px to body or .master-board works.
EDIT: According to this post, seems like it's caused by a conflict between 3d transforms and position:fixed. The chromium bug tracker marked this issue as "wont fix".
I've created a fiddle to reproduce this issue:
https://jsfiddle.net/uuhqsw57/
Adding perspective to its nearest parent helped solve the issue.
I'm trying to use a CSS filter to blur an image. In all browsers, the blur filter results in the blur going outside the bounds of the image for whatever value you set the blur to (expected). But I want the edges to be defined (and the image to have a box shadow), so I wrap the image with another div with overflow set to hidden. This works in all browsers.
However, due to some app-specific constraints, I need to update the size of the wrapper with JavaScript on load and resize. This works in all browsers except Safari. Changing the size of the wrapper element randomly triggers a painting bug where the filter begins to escape the bounds of the wrapper. It doesn't always, but it seems to increase in likelihood on MobileSafari and/or based on the size of the DOM.
Here's a fiddle with a small demo. Using Safari, resize the window repeatedly and you'll trigger the bug. Sometimes it will repaint and fix itself, sometimes it will not. (Use Chrome or Firefox and it will work fine.)
(Screenshot of the blur escaping the wrapper.)
It should be noted that unlike this fiddle, in the application I am only setting the new width and height when they change, and Safari still fluctuates between the blur escaping and not escaping even when the width and height are NOT being set during the resize event.
Things I've tried (that haven't worked):
Delaying the calculation and setting of the wrapper width until the resize event is complete using clearTimeout/setTimeout
Unsetting and resetting overflow: hidden on both the wrapper and the image with JavaScript after changing the size
Calling window.getComputedStyle(wrapper) (and on the image, and on the parent element)
All sorts of shenanigans to promote the wrapper to a composite element (e.g. translateZ(0) transforms), which does stop some of the blur overflow, but not enough. (Screenshot.) Setting a timer to disable the transform simply returns the page to full blur escape.
Setting white-space: nowrap on the wrapper
Setting the width and height via document.styleSheets[x].cssRules[x].style.setProperty() rather than object.style.width/height
Rounding the pixel values to multiples of 2 / 5 / 10 (yes, I'm desperate)
I'm pretty stuck at the moment, and would greatly appreciate any help you can provide. Thank you!
you can give a fluid width to your wrapper in CSS which will have the same effect as your JS code right now, and that might fix your bug, you can also change your width of img to max-width
#image_wrapper {
overflow: hidden;
margin: 30px auto;
box-shadow: rgba(0, 0, 0, 0.5) 0 5px 14px;
width:95% /* whatever fits you better here */
}
#image {
-webkit-filter: blur(50px);
filter: blur(50px);
max-width: 100%;
}
<div id="image_wrapper">
<img id="image" src="https://scratch.brockbatsell.com/black-wallpaper-13.jpg">
</div>
The bug seems to be averted if you add a -webkit-mask-image to the image:
#image {
-webkit-filter: blur(50px);
filter: blur(50px);
width: 100%;
-webkit-mask-image: linear-gradient(to right, #fff, #fff);
}
https://jsfiddle.net/pqjh2471/
-webkit-mask-image is not particularly well supported, but it is supported in Safari from 4.0 on.
Interestingly if I let the edges of the image outside the parent's bound by just 1px, the bug stopped occuring: https://jsfiddle.net/1edf4k9t/7/
#image {
margin: -1px 0 0 -1px;
-webkit-filter: blur(50px);
filter: blur(50px);
width: calc(100% + 2px);
}
Would that be acceptable to you?
A fluid container that keeps its width/height ratio is possible without JavaScript. You can see it here in this Fiddle.
What I've basically done is add a container called #padding_ratio, which has a padding-bottom of 62.5% (100 / 1.6, like your JavaScript did). A padding-bottom can't have a percentage value that is actually relative to the height of it's parent element, because of the fact that webpages were originally not supposed to be 'designed' vertically (hence the reason it is so hard to vertically align elements). So when you do use a percentage, it will be relative to the width of its container.
Anyway... So this container is now a solid box of padding, so if you put an img inside of it, it's gonna be outside it. So I've added position: absolute, as well as top: 0 and left: 0.
Hope this helps
I recently found a codepen with some JavaScript which creates a cool looking node effect: http://codepen.io/thetwistedtaste/pen/GgrWLp
as well as this 'glitch' effect on text using #keyframes animation:
http://codepen.io/anon/pen/YyjLJZ
I wanted to implement both on my practice website but I'm finding it hard to place the text on top of the canvas with the animation.
Here is what I have at the moment:
http://codepen.io/anon/pen/EVeVvE
What I want to achieve is the 'TEXT' to be in the centre with the glitch animation as well as the moving nodes in the background.
Is this possible?
I've tried adding a z-index to the wrap class but I don't think I'm using it correctly.
Here's what it looks like:
margin: 0 auto;
text-align: center;
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
Do I need to add a z-index to every frame of the animation? Would anyone be able to help me out with this please?
Without using the z-index, the animation works fine but the text appears at the bottom of the page which is where I don't want it to be.
This works in the latest versions of Safari and Chrome, however the clip property is deprecated and may not work in certain browsers. clip-path should be used instead, and it will need vendor prefixes. See this CodePen for a demo.
Chrome has started doing something very strange with a fixed position element. Basically it's still scrolling with the page even though it's set as fixed. It would be easiest to explain just by linking to the live site.
http://new.safetylineloneworker.com/?page_id=9
If you look at it in firefox, or hell, even IE the "Block 1 Block 2 Block 3" text acts just as it should, sticking to the top of the screen once you scroll it there until you hit the 'release point' further down.
Look at it in Chrome, and not only does it jump to its fixed position earlier than it should, but it also just...scrolls, even though it is clearly set to be fixed position. It really is one of the most bizarre things I have ever seen.
I noticed that you are using transforms. That's what's causing the problem.
Take a look at the spec: The Transform Rendering Model
Specifying a value other than ‘none’ for the ‘transform’ property
establishes a new local coordinate system at the element that it is
applied to.
So the element with fixed positioning will become relative to the element with the transform - not the viewport
Look at this FIDDLE in a webkit browser to see this in action
<div class="wpr">
<div class="fixed"></div>
</div>
.wpr
{
width: 200px;
height:1000px;
background: pink;
position:relative;
margin: 0 200px;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.fixed
{
width: 200px;
height:200px;
margin: 50px;
position: fixed;
top:0;
left:0;
background: aqua;
}
This looks like a bug in Chrome (and Safari, but Chrome is the focus of this question).
I haven't found an open issue for this bug; you should submit a report to Chromium Issues.
I am creating a simple game.
I want to use jQUERY to rotate the joints making it move. I am using .animate ( http://api.jquery.com/animate/ ) to animate CSS properties but if it is also possible to use Javscript, I can make my own custom code.
More TO-THE-POINT
How do I rotate images in CSS or Javascript? I prefer CSS but Javascript is fine too.
If it is impossible (which I am pretty sure it is but I am not giving up yet) is there any other possible way to do what i am trying to do without making a bunch of seperate images, each rotated a different way.
Or can anyone at least give me an example of a site that does something similar.
EDIT: I need 1 CSS property (no -something: rotation(500deg);) that works with FireFox, Safari and Chrome because those are the only browsers I really work with.
Firefox and the Webkit browsers support a "transform" CSS property ("-webkit-transform", "-moz-transform"). Those can do all sorts of interesting things. There's a very weak IE tool that allows very limited rotation, so it's not really an option for something like a game.
Here's a demo page I made for another Stackoverflow question a few days ago: http://gutfullofbeer.net/compass.html
As shown in the image above
1) is -90 degree or 270 degree rotation
2) is +90 degree rotation and
3) is 180 degree rotation.
Note :- The quadrant containing blue square is the original image position in web browser when displayed with img tag. This is the only visible section to developer in web browser. On rotation of image from its top left point it will switch to the invisible quadrant. Hence it is very very important to use translateX and translateY property along with rotate property in css to drag the image from invisible quadrant to visible quadrant to display it on web browser. Please refer to css transform property for more info.
The css for the same is as below
.image_rotate_270 {
transform-origin: top left; /* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left; /* Chrome */
-ms-transform-origin: top left; /* IE 9 */
transform: rotate(270deg) translateX(-100%);
-webkit-transform: rotate(270deg) translateX(-100%);
-ms-transform: rotate(270deg) translateX(-100%);
}
.image_rotate_90 {
transform-origin: top left; /* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left; /* Chrome */
-ms-transform-origin: top left; /* IE 9 */
transform: rotate(90deg) translateY(-100%);
-webkit-transform: rotate(90deg) translateY(-100%);
-ms-transform: rotate(90deg) translateY(-100%);
}
.image_rotate_180 {
transform-origin: top left; /* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left; /* Chrome */
-ms-transform-origin: top left; /* IE 9 */
transform: rotate(180deg) translateX(-100%) translateY(-100%);
-webkit-transform: rotate(180deg) translateX(-100%) translateY(-100%);
-ms-transform: rotate(180deg) translateX(-100%) translateY(-100%);
}
Now use this class names inside the class property of img tag.
<img src="xyz.jpg" id="image" class="image_rotate_90"/>
For rotation of -90 and +90 you will sometimes need to alter its height and width either with screen resolution or with original image resolution so that image will retain its original shape. Do it using javascript inside the body tag after image is loaded.
<script>
document.getElementById("image").width = screen.height;
document.getElementById("image").height = screen.width;
</script>
Suppose your original image is of 640 X 480 resolution. i.e. width = 480 and height = 640. So when you rotate the image, it becomes a image with resolution 480 X 640. So to retain its original shape. You can do the following under body tag after image loaded .
<script>
document.getElementById("image").width = 480px;
document.getElementById("image").height = 640px;
</script>
Some browsers support this:
Rotate That Image with CSS
Not a full answer, but in case it's helpful here's a fun little bookmarklet I have in Safari (works in chrome as well) that will cause the page contents to rotate:
javascript:(function(){var%20d=0;setInterval(function(){document.body.style['-webkit-transform']='rotate('+%20d%20+'deg)';d+=1},10)}());
I figured it might be helpful to see an example usage.
Not ideal, but you could make separate image files for each rotated state of the image, then use JavaScript to change <img src="XXX" /> or CSS to change background-image: url('XXX'); Once the images have loaded (you could even pre-load them with JS), the animation between them should be very fast.
Have you ever tried: http://jqueryrotate.com/ ??
Works great in all modern browsers including IE>=6