Here is a fiddle showing what's going on here. I'm trying to create an effect like that of focusing a lens in and out, but this will happen in Chrome (technically I've only tried Chromium, but they're essentially the same) even for a straightforward transition. After the animation, the content temporarily disappears and then reappears.
Does anyone know a fix for this? (Please verify it with the Fiddle in Chrome; I've tried multiple promising solutions, and all have failed.)
.blur-animation {
animation-name: focus;
animation-duration: 1.5s;
animation-fill-mode: both;
}
#keyframes focus {
0% {
filter: blur(10px);
}
100% {
filter: blur(0px);
}
}
p {
font-size: 4em;
}
<div class="blur-animation">
<p>Hello, world</p>
</div>
Update
Sorry guys, I should have tried this on Chrome rather than Chromium; the issue seems to be unique to Chromium and Android's Google app (not Chrome on Android). I don't expect a lot of people to be using Chromium, so it's not a big deal, although I am curious what caused it there.
Related
I'm using a basic CSS loading indicator, based on the one from w3schools. It works great except when using IE 10, where it jumps around.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader
Does anyone know of a workaround for IE10?
.loader {
...
border-radius: 50%;
animation: spin 2s linear infinite;
...
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
I made a test with Document mode using developer tools in IE11.
I notice that it shows the result correctly but it also shows a popup to allow block content.
If you allow it then code get break.
with other older versions of IE it not showing any pop up but also not working.
Below is my testing result.
So You can try to make a test without allowing content to check whether it is working with IE10 or not.
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.
I have a bit of CSS3 animation in my website, and it works fine on Safari but when I run the site in Firefox, it doesn't animate. Here is the code:
.ad{
position:relative;
left:740px;
top:240px;
width:260px;
height:195px;
background-image:url('ad1.png');
animation:myfirst 4s;
-webkit-animation:myfirst 4s; /* Safari and Chrome */
-webkit-animation-delay:2s;
-webkit-animation-duration:0s;
-webkit-animation-fill-mode: forwards;
}
#keyframes myfirst
{
from {background-image:url('ad1.png')}
to {background-image:url('ad2.png')}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background-image:url('ad1.png');}
to {background-image:url('ad2.png');}
}
}
Now I've noticed that the issue arises when the site hits the
background-image:url('');
if I were to change these to
background:color;
then it works, but obviously I want to use an image. I've tried adding -moz- prefixes, but it doesn't work. What am I missing? is there a way to make firefox acknowledge
Background-image:url('')
According to the latest working draft of the spec (14 August 2015), background-image is defined as non animatable.
Then, Firefox is just following the spec, and the behavior of browsers which animate background-image is non-standard and shouldn't be relied on.
The ability to interpolate between background images is a pretty new proposal so far, and not well supported in browsers. Firefox doesn't implement it yet.
use #-moz-keyframes
and -moz-animation
to define animation for firefox
I'm having a strange problem where rendering an emoji rotated to certain angles results in the emoji failing to appear.
This seems consistent across browsers, so I'm struggling to pinpoint the issue or a reasonable solution.
The code:
<style type="text/css">
.container {
background-color: #55d;
height: 500px;
padding: 50px;
width: 500px;
}
.text {
color: #fff;
font-size:2em;
margin: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<div class="container">
<div class="text">This is some text 😂</div>
</div>
See http://codepen.io/anon/pen/ORgQjb for a working example, note that changing the rotation, even to 44.5 degrees will bring the emoji back.
Does anyone have a suggestion as to why this occurs, or any workarounds?
Update
Thanks to Paulie_D and some digging, it seems this issue only manifests itself on OSX (all browsers), and not Windows (tried IE/Firefox/Chrome).
I sure don't know why it happens, but after some tinkering, I do have a couple of fixes to share.
Webkit
If a Webkit-only fix is sufficient (e.g., if you're building an Electron app), you only need to add the CSS transform perspective(0), which has no visible effect, other than causing emoji to actually render.
So:
transform: rotate(45deg) perspective(0);
instead of:
transform: rotate(45deg);
Here's a fork of your example demonstrating that fix:
https://codepen.io/troywarr/pen/yEgEdr
and a reduced test case including a reference emoji to illustrate that perspective(0) doesn't change the emoji's appearance:
https://codepen.io/troywarr/pen/aKpKmx
Cross-browser
If you need a cross-browser fix, you can use a CSS animation that rotates starting at 45 degrees (or whichever multiple of 45 degrees that you need to fix) but is eternally paused:
#keyframes spin {
0% {
transform: rotate(45deg);
}
}
.working-rotated-thing {
animation: spin 1ms; /* animation-duration must be > 0 */
animation-play-state: paused;
}
Here's a fork of your example demonstrating that fix (note that I enabled Autoprefixer to avoid messing with vendor prefixes):
https://codepen.io/troywarr/pen/mKRKZB
and a reduced test case:
https://codepen.io/troywarr/pen/oyByMx
This seems to work across browsers; I checked the latest Chrome, Firefox, and Safari in macOS High Sierra, and all were well.
So i got this transitioned scaling on hover, but sometimes theese strange bugs appear.
http://i.imgur.com/us1iXgF.png
I've read something about putting a z-index value will fix it, but it doesn't. This appears in Chrome. When looking in Canary, the bugs doesn't appear, but do anyone have a temporary solution?
.menu-item {
transition: transform ease .25s;
}
.menu-item-wrap:hover .menu-item {
transform: scale(1.1);
}