Rotate css animation glitchy in firefox - html

I am trying to rotate a div with this dead-simple code:
<!DOCTYPE html>
<html>
<head>
<style>
.spinner {
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
border-bottom: 1px solid #f00;
animation: rotate-bottom 1s linear infinite;
}
#keyframes rotate-bottom {
from {
transform: rotateX(30deg) rotateY(-60deg) rotateZ(0deg);
}
to {
transform: rotateX(30deg) rotateY(-60deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
I created a jsfiddle using the code above: http://jsfiddle.net/zg8vdyns/1/
Everything works fine on Chrome and Internet Explorer. A red curved line rotates in an endless, smooth and steady loop. However, firefox (39.0) seems to have issues rendering the animation (both the windows and linux build). First, the spinning line is much shorter than it should be. Second, the animation keeps faltering intermittently (it is not smooth). This looks like a firefox bug. Does anyone have a deeper insight into this issue?
Btw I know I should probably prefix 'animation' and 'keyframes' with '-moz-' but that is not the issue here.

Your issue is half-pixel/sub-pixel rendering. Playing around and changing border-bottom: 1px solid #f00; to border-bottom: 3px solid #f00; shows that animation is ok, but the rendering is very different from other browser engines... From another answer here of StackOverflow: Firefox CSS Animation Smoothing (sub-pixel smoothing)
The rendering engines for each browser is obviously different. Firefox does not implement an anti-aliasing effect on CSS animations. This does not inherently make it better or worse, it just depends on what you are animating. Linear transitions can appear undesirably blurred in Chrome for example.
That said it appears what you would like to achieve is to have an anti-aliased/sub-pixel smoothed transitions. We can't change the way the engine renders but we can manipulate the animation to appear softer to the end user.
But, differently from the approach provided by the answer in the link, in your scenario I think that there is a easier way to make the rendering more equivalent: http://jsfiddle.net/zg8vdyns/7/
Adding border-left: 1px solid rgba(255, 0, 0, 0.7); will kinda "force" the rendering of the half-pixels/sub-pixels that FireFox doesn't naturally...
Update:
#joshin855 also give a great answer below: adding the property background:rgba(255,255,255,0.01); will kinda "force" the rendering of the half-pixels/sub-pixels too. Your solution is very nice... It only have the disadvantage of a filled circle which depending on the scenario may not be suitable, but the line animation seems even more equivalent than in my solution... So, it also may be a good solution.

As far the line being a dot you can add background:white; or background:RGBA(255,255,255,.01); to the element which should fix the problem and make it look similar to other browsers. Sorry it's not a great answer just thought I would throw in my 2 cents.
.spinner {
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
border-bottom: 1px solid #f00;
animation: rotate-bottom 1s linear infinite;
background:RGBA(255,255,255,.01);
}
http://jsfiddle.net/fqqko0uv/2/

Related

Rendering/Flickering/Glitch issue in Chrome using CSS 'backdrop-filter:blur'

I do face a rendering problem using backdrop-filter: blur(12px); in Chrome 76 on MacOS Mojave. Whenever I start to hover with my mouse over the opened tabs in Chrome, the div using the backdrop-filter starts flickering and the div is subdivided into smaller rectangles having different colors and are split by horizontal lines with shadows.
I don't know if it's a rendering problem, a glitch, some overflow problem or just a bug in Chrome.
Here is the fiddle.
I already tried variations of:
transform: translateZ(0);
backface-visibility: hidden;
overflow: hidden;
margin: 0
will-change:top;
position: static;
Nothing seemed to work.
Minimal Example:
<html>
<head>
</head>
<body>
<div id="articleViewOverlay" class="articleViewOverlay">
</div>
</body>
</html>
.articleViewOverlay {
position: fixed;
width: 200px;
height: 200px;
border-style: dashed;
backdrop-filter: blur(12px);
background-color: rgba(125, 125, 125, 0.4);
margin: 0;
overflow: hidden;
}
From your description, my guess is that you're encountering this bug. If so, feel free to star that bug (top-left corner) to get updates. There aren't any workarounds at this point, but it's work in progress.
I had the same problem, adding this to the element being blurred fixes it:
-webkit-transform:translate3d(0,0,0);
because if forces gpu rendering
The bug was fixed in Chrome build 79.0.3945.1 (Oct 16th, 2019)

background-color property not working on Safari

Im workin on this site https://www.comercialoregon.cl and realized that when on Safari, some elements will not properly display, the main ones being those with the background-color property set to #11a004e0, instead they have a gray background. any ideas why this happening?
Here is the css for the div on the nav bar that SHOULD be green (works on chrome and mozilla). Thanks
.boton_nav {
border-radius: 4px;
background-color: #11a004e0;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 10px;
width: 220px;
margin-left: 2em;
animation-name: boton_nav;
animation-duration: 4s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-delay: 3s;
}
This server could not prove that it is www.comercialoregon.cl; its
security certificate expired 428 days ago.
There's your first problem, but it isn't directly related to the question. Just felt like reminding you that your visitors will first see that big scary invalid certificate screen and will likely leave.
The issue is you are using the #rrggbbaa hexadecimal colour notation which is not yet widely supported. As of now, according to caniuse.com, only Firefox, Chrome and Safari support it. I know you mentioned it's not working on Safari, but perhaps you're on a version older than 10?
Regardless, support isn't good so I wouldn't recommend using it just yet. Instead, use the rgba function. background-color: #11a004e0; would become background-color: rgba(17, 160, 4, 224); as the colour values are represented in decimal rather than hexadecimal.

Text is blurred when has transform: translate and it is adjacent to another element with an animation

In the following example a DIV containing some text (example A), get slightly blurred when has a transform: translate CSS applied.
When instead in Text example B, fonts is sharp.
The problem happens only on Google Chrome and works fine on FireFox 46.0.1.
I was able to reproduce it on:
Google Chrome Version 51.0.2704.84 m
Google Chrome Version 53.0.2768.0 canary (64-bit)
I would like to know, if there is a problem with my code, or it is a bug in Chrome.
Also any idea how to solve it is welcome, keeping in consideration I would like to keep transform: translate if possible, and I mainly targeting latest Chrome and FireFox.
Notes on what I have notice so far:
Blur effect happens with different level at different font-size.
Using webkit-font-smoothing : none; does not help.
Issue happens with any font (system default or custom).
I am using Window 8.1.
Here is a live example:
#test {
position: fixed;
font-size: 20px;
top: 60%;
left: 40%;
}
#splashScreen__spinner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -90px);
width: 50px;
height: 50px;
}
#splashScreen__infos {
position: fixed;
font-size: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-font-smoothing: none;
}
.loadingSpinner {
width: inherit;
height: inherit;
border: 5px solid #3498db;
border-top-color: rgba(0, 0, 0, 0);
border-left-color: rgba(0, 0, 0, 0);
border-radius: 50%;
animation: spinnerAnimation 0.7s infinite linear;
}
#keyframes spinnerAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<body>
<div data-ntv-type="Spinner" class="spinner" id="splashScreen__spinner" widgetid="splashScreen__spinner">
<div id="splashScreen__spinner__spinner" class="loadingSpinner"></div>
</div>
<div id="splashScreen__infos">A) - We are loading your website. Please wait.</div>
<div id="test">B) - We are loading your website. Please wait.</div>
</body>
This is not a bug in your code, this is well known Webkit rendering bug. See for example: https://support.mozilla.org/pl/questions/1075185 (and many more threads on FF support forums).
In both Chrome and FF, in advanced browser settings you can turn off what is called "hardware acceleration". This setting exists to let your hardware "help out" browser when in comes to advanced graphics rendering. Hardware acceleration automatically turns on for elements that you use translate and some other rules on. This is actually sometimes used by inexperienced "css hackers" to achieve some better/clearer rendering in some cases.
But sometimes it causes more bad than good and this is your case. Once you turn hardware acceleration off in your browser the font is perfectly clear. Sadly there's no real solution code-wise, you can't force turning it off for a given element. We are dependent on Webkit devs fixing the rendering engine here. You can only hack around, like for example change font size to one which for no real reason renders better. Or change positioning in some way which doesn't involve translate. Best of luck to you.

Chrome bug - border radius not clipping contents when combined with css transition

My issue is that during CSS transition border-radius temporarily stops clipping elements inside if transition of overlapping element involves transform. In my case I have two divs absolutely positioned one above the other where the first one has transition triggered by action on clicking a navigation element inside the second one, like:
<div id="below"></div>
<div id="above"><div id="nav"></div></div>
The above div has border-radius: 50% and clips the nav div. In CSS it goes like (minimal example, original onclick action illustrated as :hover):
#below {
position: absolute; width: 250px; height: 250px;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
#below:hover {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#above {
position: absolute;
width: 200px; height: 200px;
border-radius: 50%;
overflow: hidden;
}
#nav {
width: 40px;
height: 200px;
background-color: rgba(0,0,0,0.3);
}
Of course it is better visible in http://jsfiddle.net/UhAVG/ with some additional styling for better illustration.
This works as expected in IE10+ and FF25, also in Chrome 31 and 32 with hardware acceleration disabled. In result only accelerated Chrome shows this unwanted behaviour. So I'm wondering if it's possible to workaround it somehow using current CSS3 techniques.
After some more experiments I've finally found the solution. Sometimes simple ones are the hardest to find. In this case #above {z-index: 1;} (like in http://jsfiddle.net/UhAVG/1/) solves the issue. Wild guess is that z-index prevents some optimization that combines operations from single layer and doing so mistakenly optimizes out applying border-radius on element. With layers separated this is no longer the case.

CSS triangle issue in firefox

I need to use CSS triangle to create and arrow. This is the one Im working on: http://jsfiddle.net/7vRca/
<div class="arrow-outer"></div>
.arrow-outer{
border: 1em solid transparent;
border-top-color: #3bb0d7;
border-right-color: #3bb0d7;
height: 0;
width: 0;
}
The issue is that in chrome it looks perfect. But in firefox there is a small bent in the middle.
Any idea why this is happening and how can I make it look smooth as in chrome?
I haven't got a mac to test unfortunately and Firefox on Windows seems to render correctly. You could get around the problem though...
.arrow-outer {
border: 2em solid transparent;
border-right: 0;
border-top-color: #3bb0d7;
height: 0;
width: 0;
}
Instead of rendering the triangle as two sides of the border, it flattens the right border to achieve the same shape using only the top border, circumventing any alignment issues (illustrated below).
It is possible that Firefox on Mac OS is rendering the div as a pixel height which might be solved using an overflow hidden, but it is equally if not more likely that the rounding in the rendering algorithm has resulted in different pixels being selected for the edge of the right border for that combination of browser and OS. That would be my guess as to why it is happening.
Setting 'inset' for the transparent borders helped for me. I found this trick here: http://css-tricks.com/snippets/css/css-triangle/#comment-103785
Try add this into css:
-moz-transform: scale(.9999);
Try using RGB instead of transparent,
<div class="arrow-outer"></div>
.arrow-outer{
border: 1em solid rgba(255,255,255,0);
border-top-color: #3bb0d7;
border-right-color: #3bb0d7;
height: 0;
width: 0;
}
as we did here: Weird dark border :after css arrow in Firefox
EDIT: by the way, it worsk in both ways in my Firefox (one with the gray line, the others without, but never the effect you described...)