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.
Related
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>
Udate
Appeal for consistency - Mozilla bug
Udate
Adding
transform: rotateY(0deg);
to one side of the card, is a temporary fix that needs to be fixed properly.
The duplicate does not affect this solution and is vague.
Question
Particularly the backface-visibility here:
.card__face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
I tried adding the -moz- prefix despite it supposedly not being needed according to caniuse:
Still it does not work. Chrome worked without any prefix and Safari worked with -webkit- prefix contrary to caniuse.com.
Here is the jsfiddle. Clicking on the icon should make the icon rotate 180 degrees.
Add rotateY(0deg) to your .card__face--front class.
.card__face--front {
transform: rotateY(0deg);
}
http://jsfiddle.net/3h0cgukf/
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.
Working on some small map of Europe with Raphael.js.
It works fine in IE7+, Safari, Firefox. However, in Chrome, when hovering over France a white box shows up on my map. It seems to come out of nowhere, it only happens with France and it disappears when you hover over another country.
The JSFiddle of my map is here; I still need to clean up the code, but it works.
http://jsfiddle.net/ontolecabaret/ncyge/
It seems as if the problem has to do with this line:
$c.css({ top: e.pageY, left: e.pageX}).fadeIn(500);
When I remove the 'left' setting, the box doesn't show up. When I put 'left' at 50px, or 50px margin-left, the box appears a lot smaller. It seems as if something somehow gets pushed to the right by the France box, but I can't seem to put my finger on it.
EDIT: Reopening this question, as the fix doesn't fix my problem.
With the -webkit-transform: translate3d(0,0,0); css on the map, the white box is gone, but there's a new problem: black dots showing up all over my map and the paths don't render properly.
Is this, too, a bug in Chrome or can I fix this one way or another?
The SVG renders fine in Safari, FF, even IE.
I've seen that in the latest versions of Chrome animation occasionally leaves trials (I can't pinpoint when exactly), the way I've fixed this is forcing webkit to use the gpu to cache the image. You achieve this by applying a 3d transformation:
#map {
background: #f4f3f0;
width: 631px;
height: 686px;
-webkit-transform: translate3d(0,0,0);
}
http://jsfiddle.net/5s7dR/
But since—for some reason I can't fathom—this messes up your paths, you can achieve the same effect with -webkit-backface-visibility: hidden;
#map {
background: #f4f3f0;
width: 631px;
height: 686px;
-webkit-backface-visibility: hidden;
}
http://jsfiddle.net/VaKvX/
This is not a problem specific to Raphael, it sometimes happens with CSS transitions, jQuery and vanilla js.
I had a problem with fonts - gridy border, when very large
My solution was to enhance viewBox - by factor 10 - then the tolerances gets very small
but the price is to factor all content - by 10 ?