The countdown UI is clipped on Chrome on certain displays

[abhishek-nandgaonkar]

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?

[pughpugh]

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]

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]

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]

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]

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

react-countdown-clock/coffee/react-countdown-clock.coffee

Line 177 in 548acc5

_drawTimer: ->

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

#34 (comment)

Hope that helps.

[laurencefass]

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]

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