search

pughpugh / react-countdown-clock

HTML5 canvas countdown clock React component
ISC License
187 stars 83 forks source link

The countdown UI is clipped on Chrome on certain displays #55

Open abhishek-nandgaonkar opened 6 years ago

abhishek-nandgaonkar commented 6 years ago

When I open the URL you shared: http://pughpugh.github.io/react-countdown-clock/ in Chrome, there is color clipped at the bottom and right side of the countdown timer.

The problem occurs on the following display: Apple Thunderbolt Display 27-inch (2560 x 1440) AMD Radeon R9 M370X 2048 MB graphics Chrome v 65.0.3325.181 (64 bit) Mac OS Sierra v 10.12.6

Do you know what might have caused this and is there a fix coming up soon for this?

chrome_countdown

pughpugh commented 6 years ago

Hi. Thanks for the bug report.

I'm not able to replicate this; If it's still a problem, could you let me know what OS and browser version you are on.

abhishek-nandgaonkar commented 6 years ago

Hi,

I can confirm that the component works on the built in display of Macbook Mid-2015 15.4-inch.

But the clipping of the component happens on Apple Thunderbolt Display 27-inch (2560 x 1440) AMD Radeon R9 M370X 2048 MB graphics Chrome v 65.0.3325.181 (64 bit) Mac OS Sierra v 10.12.6

pughpugh commented 6 years ago

Thanks for the details. Although I have a Thunderbolt display, I can only test this on Macbook Pro with High Sierra and a Radeon 555. With that configuration it all works fine. I'm not sure I can investigate it any further without being able to replicate it.

abhishek-nandgaonkar commented 6 years ago

I understand.

In that case, will it be possible for you to point me to the part of the code that might be causing the issues? I can fork/pull the repo and try to find a fix for my case.

pughpugh commented 6 years ago

There's not a lot to it, but maybe have a look where the timer is drawn;

https://github.com/pughpugh/react-countdown-clock/blob/548acc55e2452a8df3a7f9097bc3abb32db037ad/coffee/react-countdown-clock.coffee#L177

There are some vague notes on building the component on the following issues.

https://github.com/pughpugh/react-countdown-clock/issues/34#issuecomment-365738853

Hope that helps.

laurencefass commented 3 years ago

countdown timer is clipping as per diagram in latest version of chrome and microsoft edge both running on windows. is there a stable fix for this?

https://codesandbox.io/s/w2v7zzn63w?file=/src/Home.js:1363-1375

laurencefass commented 3 years ago

Same issue here in Chrome and Edge on windows. https://codesandbox.io/s/react-countdown-click-not-rendering-properly-fit8i?file=/src/App.js