search

hilios / jQuery.countdown

The Final Countdown plugin for jQuery
http://hilios.github.io/jQuery.countdown/
MIT License
2.31k stars 719 forks source link

Still having odd display issue #100

Open MichaelTurk opened 9 years ago

MichaelTurk commented 9 years ago

After implementing the CSS fix from issue #72, we're still seeing odd display flickers and artifacts. To make sure it was not just our instance, I pulled up the countdown homepage and was able to duplicate the problem there (see attached).

Sometimes it is a relatively small line like this:

screen-shot-2015-02-18-at-11 20 44-am

Sometimes it is significantly larger:

countdown-oddity

Anyone have thoughts as to what would be causing that? We're seeing it on a number of displays, cards, and OSes, so it doesn't seem to be specific to the hardware or the OS. It does, however, seem to be more common in Chrome than any other browser.

hilios commented 9 years ago

Thank you for your feedback, but this problem seems to be caused by hardware acceleration, dunno if there is a way around by css/html.

I never saw this bug on my computer though, and I use Chrome has my main browser, I think we need to investigate the real cause of this issue.

dingo-d commented 9 years ago

This happens on Chrome and Opera if I recall correctly. On FF there is no such bug, so it's definitely a rendering issue.

MichaelTurk commented 9 years ago

Is it specific to the "flip" clock implementation? I have used the clock without the flip animation and never had issues. So I'm wondering if it's something in that specific use case.

dingo-d commented 9 years ago

For me it happened only with the flip clock. From what I can tell other people only have the issue with the flip clock as well.

hilios commented 9 years ago

Guys, it's an issue with the CSS of the flip clock, I really don't have much experience with 3d animations and hardware acceleration at CSS level. Do you guys can guess where we begin to solve this problem?

vilius-g commented 9 years ago

The issue seems to go away when the perspective value for .main-example .time is under 480px. When I set it to 479px everything is displayed perfectly, but when I increase it to 480px the artifacts come back. This is very weird but seems to work for me.

dingo-d commented 9 years ago

For me it goes away when I put perspective to 0px;

hilios commented 9 years ago

The problem is not the script itself, but the machine hardware acceleration! The output will dependent on your computer

Em sex, 27 de mar de 2015 06:04, dingo-d notifications@github.com escreveu:

For me it goes away when I put perspective to 0px;

— Reply to this email directly or view it on GitHub https://github.com/hilios/jQuery.countdown/issues/100#issuecomment-86873713 .

dingo-d commented 9 years ago

Yeah, I think it also depends on the browser, because if I recall correctly, on firefox the issue didn't exist. And ff is known to handle css3 transformations better than chrome (or webkit based browsers).

vilius-g commented 9 years ago

Another thing I noticed that at transform: rotateX(90deg) the card is still visible. It seems that the transformation origin is not aligned properly.