I've been trying to apply a transform rule to some elements which also have a #font-face font applied to them.
h1 {
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
transform: rotate(-1deg);
}
When this transform rule is applied, I get the rotation I'm after, but the text does not appear correctly — although it's rotated, it's as though each character is bound to an origin which sits on a pixel, and so the line of text looks jagged.
If I simply replace the font with a system font, the problem goes away, so would appear to be related to the use of #font-face. I've tested it in a variety of browsers on OS X and Windows, and they all show similar results.
Has anybody come across this problem before, or can anybody give any advice on why this might be occurring?
Check out the source for this experiment.
It uses #font-face with rotate as well as some other nifty CSS3 effects.
Add these styles to <h1> element:
-webkit-backface-vivbility: hidden;
-webkit-transform: translate3d(0,0,0);
-webkit-transform-style: preserve-3d;
Related
I am experiencing some weird issues with CSS scale transitions. The scaling works fine, however there are some weird lines around the scaled element, which disappear after scrolling. This happened in a Chrome browser and in Microsoft Edge. And I don't assume it has something to do with margin, padding, the z-index, colors or anything else along those lines, because it happened with and without these properties being included in the relevant CSS.
This is the relevant CSS as a quick draft:
.element {
background-color:black;
transition: transform 0.5s;
transform:scale(1, 1, 1);
}
.element:hover {
transform:scale(1.1, 1.1);
}
Here is a quick recording to demonstrate that: https://streamable.com/cyvkjm
Here is also a screenshot for those who can't see the video for some reason:
Your streamable link worked fine for me. I remember having a problem similar to that a while ago, and it was something to do with using 3d scaling
Check this out though, I'm fairly certain backface-visibility: hidden and the -webkit equivalent will fix it. As I can't reproduce this I can't be of much more help
CSS transition on element leaving lines
Edit: after reproducing the problem we found a fix. Tested and works in Chrome/Edge/Firefox. perspective(1000px) seems to work better than perspective(0)
.element {
transform: scale(1) perspective(1000px);
}
.element:hover {
transform: scale(1.1) perspective(1000px);
}
Hey guys i have this carousel for which the arrows are created entirely in CSS , see HERE.
Now the arrow has a slight error on hover i have applied the following code to the arrow circle:
CSS:
.arrow-outer-prev:hover,
.arrow-outer-prev:focus,
.arrow-outer-prev:active {
-webkit-transform: translateX(-5px);
-ms-transform: translateX(-5px);
-o-transform: translateX(-5px);
transform: translateX(-5px);
}
(The fiddle does't show the error , so i will be sharing a link).
Now on shower my intertion is to move the circle, but an error occurs and along with the circle the arrows also tilt slightly , SEE GIF.
The error can be seen on this link too HERE.
The bug looks slightly different in FF and chrome. In chrome the bug looks even more awkward though. unfortunately i have not been able to reproduce this bug , nor has debugging in chrome using dev tools worked for me.
Can somebody point out to me what am i doing wrong here ? Why is are the arrows moving when the CSS is clearly for only the circle to move ?
I have built this awesome css only loader and everything is working fine except in Internet Explorer. For some reason, IE feels as if it needs to constantly shake. When it comes down to it all I'm doing is a simple keframe animation like this:
#keyframes loading
0%
transform: scale(1)
50%
transform: scale(1.2)
100%
transform: scale(1)
Here is my CodePen for the loader: http://codepen.io/MrGrigri/pen/zxWQdb
Also, here is the blog associated with it: http://codepen.io/MrGrigri/blog/responsive-loader/
In all of the other browsers its working like a champ...just not IE.
I'm testing it in IE Version 11.0.16 on Windows 8.1
Thanks for the help
I was having this same problem in IE 11, I could realize that if I reduce the time of the animation could works (ex. 0.3s). But that wasn't a solution for me.
While I was reading How to fix shaking CSS transitions in Firefox I found one solution (for Firefox), and I thought that could work the same concept for IE.
The idea is rotate (the minimum possible) the div or image while your making the scale. Just like this:
#keyframes loading
0%
transform: scale(1);
50%
transform: scale(1.2) rotate(0.02deg);
100%
transform: scale(1);
I made this trick and works in IE 11.
I would like to be able to use calc() with transform:translateX in my CSS.
E.g.,
#myDiv {
-webkit-transform: translateX(calc(100% - 50px));
-moz-transform: translateX(calc(100% - 50px));
transform: translateX(calc(100% - 50px));
}
While this works perfectly in Chrome, Safari, and Firefox - it does not work in IE10 or IE11.
You can see a simple example here: http://jsfiddle.net/SL2mk/9/
Is this impossible? Is it a bug in IE, or is calc() not supposed to work in this context?
For what it's worth - I read here that you can "stack" translateX to acheive the same effect, and my testing seems to confirm this. I.e.,
#div {
transform: translateX(calc(100% - 50px));
}
is the same as:
#div {
transform: translateX(100%) translateX(-50px);
}
But I don't know if this is the best, most reliable, and future-proof way to do this.
I also know that it's possible to use left instead of translateX, but the latter is much smoother when used with transitions, since, as I understand it, it forces the use of the GPU to handle the animation.
This:
transform: translateX(100%) translateX(-50px);
gets compiled at parse time, but calc expression here :
transform: translateX(calc(100% - 50px));
has to be interpreted each time when browser needs that value. Result of the expression can be cached but I wouldn't rely on browsers to use such kind of optimizations.
So first one is better in the sense that a) it works now, b) is effective and c) it will work in future until the spec will be in effect.
I just use them both with -ms- browser selector. It works perfectly.
-ms-transform: translateX(100%) translateX(-50px); /* IE 11 */
transform: translateX(calc(100% - 50px));
I'm trying to implement a gauge widget for a website. The spec says only HTML/CSS is allowed, so I can't use JavaScript (don't ask me why -- maybe if there's a really simple way of doing it with JavaScript I could persuade the project lead).
So far I have a div with a background image that shows the back of the gauge. Inside this div is an img that is rotated, depending on the gauge value. This value is dynamically injected into the HTML using PHP.
The gauge works fine in Safari/FireFox, but breaks in IE. If I add a border to the image I can see why -- it appears that the IE rotation also includes an automatic translation so that the needle is off-center (see screenshot below).
So, here's the question: how do I shift the needle back to the center of the gauge in IE?
<div style="background: url('genies/gauge.png'); background-repeat: no-repeat; height: 235px; overflow: hidden;">
<img src="genies/gauge-needle.png"
style="-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678118655, M12=-0.70710678118655,M21=0.70710678118655, M22=0.70710678118655, sizingMethod='auto expand'); zoom: 1;" />
</div>
The problem here is that the image is rotating about a point that you don't expect it to.
You need to set the transform origin to the centre of your image.
For instance, you would use -moz-transform-origin, -webkit-transform-origin, -o-transform-origin, -ms-transform-origin, -etc-transform-origin...
Check out this page for information on how to deal with the Matrix filter in MSIE:
https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie
This is going to be difficult to solve without javascript, if your gauge only moves by a couple of increments (say, 15, 30, 45... deg), you could use this tool:
http://www.useragentman.com/IETransformsTranslator/
and manually pass the margin-left and margin-top values to IE.
Otherwise I'd recommend javascript with CSSSandPaper by the same author. http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/.
I found a solution without JS, for IE - see here