I have an issue where my css3 transformations are effecting other elements on the page and even causing them to sort of flicker. I saw another post about this but they didn't have a resolution with the issue.
http://scosha.mybigcommerce.com/w107b/ when you scroll over the navigation you see an animated css3 transformation. It works fine in firefox without flickering but with chrome and safari the effect is very obvious, you see it in the drop down menu items as well as the footer text.
Working solution for flickering elements during transition in Chrome is to set up CSS for parent node:
-webkit-backface-visibility: hidden;
The solution for me was to apply the bellow css to the parent of all affected elements.
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
This is a known issue with Macintosh text rendering on Chrome 22 (and apparently Safari). GPU acceleration causes MacOS to switch from subpixel to greyscale antialiasing which makes the font weight appear to decrease noticeably.
Update:
As the OP notes below, the fix is to apply -webkit-font-smoothing: antialiased - which applies grayscale anti-aliasing at all times. If you do this, you'll probably want to increase your font-weights all around since greyscale anti-aliased text looks notably thinner than sub-pixel
You can get the same effect by applying properties that cause the content to always be GPU accelerated (such as back-face-visibility: hidden) but because these are not guaranteed to cause GPU acceleration in future browser versions - it is more future proofed to simply specify greyscale.
I was having the same issue in Chrome but not Firefox.
The temporary fix is to add a web-kit fix and remove the transition:
-webkit-transition: none;
Related
There appears to be a bug in the behavior of backdrop-filter: blur() on both Chrome and FireFox browsers (at least on Mac OS). This problem is not present on Safari.
Video of bug
I have created a CodePen demo of this problem:
https://codepen.io/beefchimi/pen/vYjmQKO
Scenario
ElementA is a <img />.
ElementB is a <div /> that overlaps ElementA (via grid, or position, etc... exact layout doesn't appear to matter).
ElementB applies a backdrop-filter: blur(10px).
The parent wrapper of these elements has an opacity value below 1.
Problem
The moment the shared parent of these elements drops its opacity, the backdrop-filter: blur() effect does not render correctly. It still applies a blur... but that blur appears to lose intensity the closer it gets to the edge of the underlying element. In other words, the edge of the underlying visuals appear crisp, while further from the edge becomes blurry.
This problem goes away the moment you apply a fully-opaque background style to the parent.
Requirements
In my specific use-case, I cannot apply a background style to the parent. The underlying page uses a background-image that I do not want to conceal.
Questions
Is there any clever trick to getting this blur effect to work as desired?
Have I got something obvious wrong in my CodePen demo?
Is this a legitimate bug in the implementation of backdrop-filter: blur(), and should it be reported to all affected browsers?
Thank you in advance for any assistance.
Here's a reproduction of my issue (codepen because apparently stackoverflow's iframe affects the rendering somehow):
https://codepen.io/Ironimus/pen/GRjxpXZ
When using transform: translateZ and perspective inner elements' edges and text become blurry. It works very differently in different browsers, too. In case it also depends on screen or OS, here are a few screenshots with descriptions:
In Google Chrome transform: scale(2) is fine. Text and inner elements become blurry depending on the width of the element with perspective, and it follows very strange logic, when I set the width to 847px or higher it breaks, lower looks ok:
In Mozilla Firefox text becomes blurry if perspective/translateZ combination is used, inner elements are fine, transform: scale(2) is ok as well. width doesn't seem to affect anything:
In Safari everything is hella blurry whatever I do:
Why is it blurry at all and how do I make it right? Using transform: scale(2) for everything isn't a viable option. Are there maybe some rules I should follow to help browsers render 3D transforms with text right?
Supporting Safari isn't a priority but would still be nice
Have you tried adding a custom -webkit to the browser?
I am probably late with this answer but I recently encountered the same behavior when implementing a parallax design for a website.
This is a problem related to text being rendered as bitmaps in Safari, which are not re-rendered on transform: scale(x); but instead blown up in size.
It is possible to manually trigger a re-render of the text in some cases, however this is very finicky and there's no guaranteed way to make it work.
A more comprehensive answer to this was provided by Jack in this thread:
Transform scale() Safari bug when used on elements with border
I have an element with a -webkit-filter: blur(10px); applied to it. I'm using a CSS animation to move the element up and down with it's translateY property. When the element is animating or transitioning the blur remains but the edges become hard. When the animation or transition ends the the edges become blurred again like they're suppose to. I made a demo that shows examples of the notes that follow it.
Demo: http://jsbin.com/bofahekuko/1/edit?html,css,output
I Tried Fixing it With:
adding -webkit-font-smoothing: subpixel-antialiased; to the animating element.
forcing hardware acceleration on the animating element and adding backface-visibility: hidden on the parent
Things of Note
Happens with both CSS transitions and animations
If you move the element up and down via the CSS top property the blur filter renders correctly.
Browser Testing
Bug appears in Google Chrome (running Version 50.0.2661.86 (64-bit)) as well as in Canary.
Both Firefox and Safari (iOS and Desktop) correctly render the blur filter during the animation.
I'd really like to be able to run the animation with the translateY transition property instead of the top property. If there really isn't a fix it'd still be interesting to know what exactly is going on here to cause the problem.
Thanks in advance for any help on this.
This is a problem that's probably caused by hardware accceleration - the GPU is just moving the original blurred content without updating its background.
To fix, don't use translate or use another trick to disable hardware acceleration (like simultaneously animating margin or padding)
Check this codepen: http://codepen.io/anon/pen/KkgeL/.
How come it's so glitchy when animating it? I'm on Chrome v.33. Works perfectly fine in Safari and Firefox (Safari glitches the same way as Chrome [read below], but instead of the width it's the height).
edit: I can try to explain the glitch for those of you who don't see it. It animates all properties somewhat OK, but at the very end of the animation, the width of the 3 divs instantly changes by a handful of pixels which is very, very undesirable.
For those of you who use Chrome and doesn't see the glitch please comment with your Chrome version.
I'm not sure yet of what is this about, but I added a delay on the transition of .logo > div and the problem was solved but I don't know if you can retain this transition.
Try it and let me know
-webkit-transition-delay: 1s;.
I have a page that uses a number of simple animations, including some JavaScript animations that add/remove CSS classes to elements with CSS3 animations for rotations. I am not using canvas.
On the PC, the page looks great in Chrome/Safari, Firefox, and IE, but on Macs, a number of elements are completely missing on the page when it is viewed in WebKit (Chrome, and Safari 5.0.3). It looks fine in Firefox on Mac. The missing elements don't have any animations applied to them -- I don't see any connection between them and the animations.
The page validates, the CSS nearly validates except for the vendor extensions and the zoom property in my clearfix. Disabling all of the JavaScript on the page doesn't change anything. The missing elements are in the source, they are just not visible on the page.
At first glance, it looks like the Z-indexes have gotten screwy on the invisible elements. Changing these doesn't affect the problem though. Removing all of the absolute, relative, fixed positions, as well as floated elements in the entire document doesn't affect the problem. The only action that does anything, is removing all of the Webkit animations.
And when I apply all of the animations, nearly everything on the page disappears!
Here is an example of one of my animations -- simple stuff:
#-webkit-keyframes propeller {
0% {-webkit-transform: rotateX(90deg);}
50% {-webkit-transform: rotateX(1deg);}
100% {-webkit-transform: rotateX(90deg);}
}
#element {
-webkit-animation:propeller 1s linear;
-webkit-transform-origin:50% 50%;
}
Even if the animation is not called, simply the presence of the keyframes causes the page to break.
If I use this animation in particular (just the -webkit- vendor prefix), it causes a large form to vanish that is a sibling of the great-great ancestor of "#element."
Here is a link to the page I'm working on. I had nothing to do with the design:
http://goo.gl/6XXcV
All of the animations are contained in animations.css and all the JavaScript animations are in general.js.
This has been very slow-going for me since I don't have a Mac -- I'm just using Microsoft Expression Web 4 SuperPreview -- but my client has a Mac and is not impressed. Thanks in advance for any advice.
I just pulled up the site in Chrome for mac and Firefox for mac (versions 22.0.1229.94 and 14.0.1 respectively) and aside from a couple spacing differences (which are minor) the look the same. The only odd thing I see is the light blue background showing up next to all the graphics if your window is narrow enough to warrant (the seemingly needless) horizontal scroll.
What exactly is missing?
For the most part, the trouble turned out to be from bugs in Microsoft Expression Web 4 SuperPreview with their Mac/Safari 5.0.3 emulator service. When any -webkit- vendor prefixes are used for CSS3 animations, it causes elements seemingly unrelated to the animations to behave as if they have visibility:hidden.
The similar problems with the disappearing elements first reported by my client using an actual Mac with Chrome seem to be from a bad .svg font conversion that was being used with #font-face. Although the svg font was rendering on Mac/Webkit, it appeared to be destroying styles on elements in which it was used as well as parent elements. When I converted the font once more to svg using a different conversion utility, the problem resolved. Weird.