CSSgram doesn't play well with CSS transformations about cssgram HOT 8 CLOSED

Hmm intersting! Let me know if you've created that fiddle -- @desandro do you know what might cause this?

from cssgram.

Sounds like a compositing issue with the browser. If you have a reduced test case demonstrating that issue, we may be able to whittle it down to which property is causing the issue, then take it up with Chrome Bugs.

from cssgram.

Here is a jsfiddle: https://jsfiddle.net/thelamborghinistory/1mLxk41s/ (sorry it took so long, I forgot about that I wanted to do that!).

If you flip the card without a filter applied, it works like a charm. If you add a filter to it you will start seeing a flickering while the card flips around, which is the issue I have found with it (sometimes it happens to me that the front page would go plain white after flipping back, too). Another thing I noticed is, that it's only flickering you use the overflow: hidden; stuff as well to get the rounded corners (comment it out and it works pretty fantastic). I really have doubts about this being fixable with CSS.

from cssgram.

The flickering seems like a z-index issue. Try adding z-index values so they're not on the same plane. Also, try using 3d transformations as they usually perform better due to hardware acceleration.

from cssgram.

Hi,

I just played around a bit with this issue and discovered that changing the position attribute actually fixes the flickering. 😄

Changing the #card figure element's position: absolute to position: fixed is all it takes. Testing the result in the fiddle didn't bring up any other issues caused by this change but if I missed anything here please tell me 👍

Here's the forked fiddle: https://jsfiddle.net/DeMuu/zv8cjrc2/2/

from cssgram.

Interesting... I wonder if this is a browser bug. Did you test on any other systems?

from cssgram.

I tested it with Firefox and Safari as well (macOS). Firefox seems to have a rendering issue cause there's a bit of flickering even without any filters. Safari has a problem with an iframe property jsFiddle is using so it doesn't work.

from cssgram.

Closing since this seems to be a browser-level issue

from cssgram.