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.
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);
}
I want to apply mirror effect on my HTML 5 Video. I did this by applying this CSS
transform: scale(-1, 1);
filter: FlipH;
It's working on desktop and web, but it's not working on mobiles (when we enter into full screen).
According to #PhonicUK in this question
here's the solution most used browsers:
#videoElement
{
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
-moz-transform:rotateY(180deg); /* Firefox */
}
You can use rotateY property instead of scale for this:
transform:rotateY(180deg);
I think you should make it compatible for all web browsers. Try something like this:
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1);
transform: scale(-1, 1); filter: FlipH;
See filter property compatibilities: https://caniuse.com/#feat=css-filters
If you’re able to then you should flip the actual source video and save a new version rather than trying this in code. I don’t know what performance hit this has for mobiles and I think full screen mode is ‘outside’ the browser’s context and varies per device. If you can’t edit the source video then heopfully the other answer can help.
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 want to insert an image into marquee tag.
I have written following code:
<marquee scrollamount="4" behavior="alternate" direction="right" width="300"><img width="180px" style="padding-left:30px;opacity:0.7" src="img/cloud3.png"></marquee>
Its working fine in firefox and IE but not working in chrome.
What is the problem.?
Please reply as early as possible.
Thanks in advance.
Because the marquee tag is a crime against nature. And it's no longer supported in newer versions of Chrome.
The marquee is not supported in modern html. Chrome dropped support for it a while ago. You need to implement this via CSS3 or Javascript.
Further W3C states that it is non standard and should not be used.
The effect can be easily acheived via jQuery or via CSS3
The marquee element has varying implementations, partly because there has been no published specification for it. In HTML5, the element is being defined exactly, and HTML5 drafts require support to marquee as defined there. (The drafts also declare it “obsolete” and “nonconforming”, but these are just what they say to authors; the requirements on implementations are different.) However, there are still limitations and differences in support, see e.g. MDN on marquee.
In this case, it does not seem to be the image but the attribute behavior="alternate" that causes the problem. If you remove it, the image will move on Chrome, too.
This is apparently implementation bug rather than lack of support. Inspecting the DOM in Chrome shows that the behavior property has the value alternate as specified, but it just does not work. If you add a border to the marquee element in CSS, the image starts moving, alternatingly, but just a few pixels right and left.
If you really alternating direction, it is probably best to use some other technique instead of marquee. For example, a simple moving image can be implemented using JavaScript so that the position is changed in a loop, using a timer, and then you can easily implement alternating direction, too. Alternatively, possibly simpler but not as robustly (due to limited browser support), you can use CSS3 animations.
HTML:
<div id="cloud">image</div>
CSS:
#cloud{
width:180px;
padding-left:30px;
opacity:0.7;
animation:slide 10s infinite;
-moz-animation:slide 10s infinite;//Firefox
-webkit-animation:slide 10s infinite;//chrome and safari
-o-animation: slide 10s infinite;//Opera
}
#keyframes slide{
0% {-transform: translate(0px, 0px); }
100% {-transform: translate(500px,0px); }
}
#-moz-keyframes spin{
0% {-moz-transform: translate(0px, 0px); }
100% {-moz-transform: translate(500px, 0px); }
}
#-webkit-keyframes slide{
0% {-webkit-transform: translate(0px, 0px); }
100% { -webkit-transform: translate(500px,0px); }
}
#-o-keyframes slide{
0% {-o-transform: translate(0px, 0px); }
100% {-o-transform: translate(500px, 0px); }
}
Here is the fiddle:
http://jsfiddle.net/qCahH
Replace the text with the image.
Marquee has been deprecated so will show unspecified behaviour on different browsers.
Who said it doesn't ?
On Chromium 83.0.4103.61 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit) it works flawlessly.
Didn't test on Chrome, though.
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;