Bug: Safari glitch when using CSS perspective #12
Comments
|
I use it to get 3D transition each time the clock flip |
|
To me it looks like it also works without it, is there a huge difference when not using it? |
Screen.Recording.2023-04-04.at.14.23.32.movYou can see in this video the difference. As the project description "A 3D animated countdown component for React", I want to make it 3D animated. In your case, seem like you just want to display the normal clock (without animation) |
|
Of course, you can disable it if, in the new version, we allow more customization to each UI element |
That'd be awesome and might solve some issues we have and also the ones related to #10, yes. Do you see any chance of implementing this feature request in the near future? |
|
I'm quite busy at the moment and I don't know when this feature will be released. If you can, don't hesitate to create a PR. |
|
Hey @sLeeNguyen, from what I've seen so far in our environment the problem was gone once I added Here is our patch (using diff --git a/node_modules/@leenguyen/react-flip-clock-countdown/dist/index.css b/node_modules/@leenguyen/react-flip-clock-countdown/dist/index.css
index 4575067..0b6c14b 100644
--- a/node_modules/@leenguyen/react-flip-clock-countdown/dist/index.css
+++ b/node_modules/@leenguyen/react-flip-clock-countdown/dist/index.css
@@ -1 +1 @@
-._qWTcH{--fcc-flip-duration:0.7s;--fcc-digit-block-width:46px;--fcc-digit-block-height:80px;--fcc-digit-font-size:50px;--fcc-label-font-size:16px;--fcc-label-color:#fff;--fcc-background:#0f181a;--fcc-digit-color:#fff;--fcc-divider-color:hsla(0,0%,100%,0.4);--fcc-divider-height:1px;--fcc-shadow:0 0 2px 1px rgba(0,0,0,0.1);--fcc-separator-size:5px;--fcc-separator-color:var(--fcc-digit-color);font-family:inherit;font-size:var(--fcc-digit-font-size);color:var(--fcc-digit-color);line-height:0;font-weight:500;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default;display:flex;align-items:center}._1tbqx ._3cpN7{margin-bottom:calc(var(--fcc-label-font-size)*2)}._3cpN7 ._2EBbg:not(:last-child){margin-right:4px}._3cpN7{position:relative;display:flex;align-items:center}._2aOn7{color:var(--fcc-label-color);line-height:1;font-weight:400;font-size:var(--fcc-label-font-size);position:absolute;bottom:0;left:50%;transform:translate(-50%,150%)}._2EBbg{perspective:200px;position:relative;width:var(--fcc-digit-block-width);height:var(--fcc-digit-block-height);box-shadow:var(--fcc-shadow);border-radius:4px}._106d2,._SKh-V{position:absolute;width:100%;height:50%;overflow:hidden;display:flex;justify-content:center;background:var(--fcc-background)}._SKh-V{align-items:flex-end;top:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:var(--fcc-divider-height) solid var(--fcc-divider-color)}._106d2{align-items:flex-start;bottom:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px}._3luxx{position:relative;z-index:2;width:100%;height:50%;transform-style:preserve-3d;transform-origin:bottom;transform:rotateX(0)}._3luxx._2kgZC{transition:transform var(--fcc-flip-duration) ease-in-out;transform:rotateX(-180deg)}._2v-d4{position:absolute;width:100%;height:100%;display:flex;justify-content:center;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--fcc-background)}._1GZQ7{align-items:flex-end;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:var(--fcc-divider-height) solid var(--fcc-divider-color)}._3AVXa{align-items:flex-start;transform:rotateX(-180deg);border-bottom-left-radius:4px;border-bottom-right-radius:4px}._2hRXr{margin-left:8px;margin-right:8px;height:var(--fcc-digit-block-height);display:flex;flex-direction:column;justify-content:center;align-items:center}._1tbqx ._2hRXr{margin-bottom:calc(var(--fcc-label-font-size)*2)}._2hRXr:after,._2hRXr:before{content:"";width:var(--fcc-separator-size);height:var(--fcc-separator-size);border-radius:50%;background-color:var(--fcc-separator-color)}._2hRXr:before{margin-bottom:var(--fcc-separator-size)}
\ No newline at end of file
+._qWTcH{--fcc-flip-duration:0.7s;--fcc-digit-block-width:46px;--fcc-digit-block-height:80px;--fcc-digit-font-size:50px;--fcc-label-font-size:16px;--fcc-label-color:#fff;--fcc-background:#0f181a;--fcc-digit-color:#fff;--fcc-divider-color:hsla(0,0%,100%,0.4);--fcc-divider-height:1px;--fcc-shadow:0 0 2px 1px rgba(0,0,0,0.1);--fcc-separator-size:5px;--fcc-separator-color:var(--fcc-digit-color);font-family:inherit;font-size:var(--fcc-digit-font-size);color:var(--fcc-digit-color);line-height:0;font-weight:500;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default;display:flex;align-items:center}._1tbqx ._3cpN7{margin-bottom:calc(var(--fcc-label-font-size)*2)}._3cpN7 ._2EBbg:not(:last-child){margin-right:0px}._3cpN7{position:relative;display:flex;align-items:center}._2aOn7{color:var(--fcc-label-color);line-height:1;font-weight:400;font-size:var(--fcc-label-font-size);position:absolute;bottom:0;left:50%;transform:translate(-50%,150%)}._2EBbg{perspective:200px;overflow:hidden;position:relative;width:var(--fcc-digit-block-width);height:var(--fcc-digit-block-height);box-shadow:var(--fcc-shadow);border-radius:4px}._106d2,._SKh-V{position:absolute;width:100%;height:50%;overflow:hidden;display:flex;justify-content:center;background:var(--fcc-background)}._SKh-V{align-items:flex-end;top:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:var(--fcc-divider-height) solid var(--fcc-divider-color)}._106d2{align-items:flex-start;bottom:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px}._3luxx{position:relative;z-index:2;width:100%;height:50%;transform-style:preserve-3d;transform-origin:bottom;transform:rotateX(0)}._3luxx._2kgZC{transition:transform var(--fcc-flip-duration) ease-in-out;transform:rotateX(-180deg)}._2v-d4{position:absolute;width:100%;height:100%;display:flex;justify-content:center;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--fcc-background)}._1GZQ7{align-items:flex-end;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:var(--fcc-divider-height) solid var(--fcc-divider-color)}._3AVXa{align-items:flex-start;transform:rotateX(-180deg);border-bottom-left-radius:4px;border-bottom-right-radius:4px}._2hRXr{margin-left:4px;margin-right:4px;height:var(--fcc-digit-block-height);display:flex;flex-direction:column;justify-content:center;align-items:center}._1tbqx ._2hRXr{margin-bottom:calc(var(--fcc-label-font-size)*2)}._2hRXr:after,._2hRXr:before{content:"";width:var(--fcc-separator-size);height:var(--fcc-separator-size);border-radius:50%;background-color:var(--fcc-separator-color)}._2hRXr:before{margin-bottom:var(--fcc-separator-size)}
\ No newline at end of file |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi @sLeeNguyen,
I wonder why
perspectiveis required and if one can disable it and make it optional.react-flip-clock-countdown/src/styles.module.css
Line 57 in 7c28190
Because in our setup, Safari has issues when using this value:
I started using
patch-packageto fix this (and #10), but it seems this is either a bug or should be configurable. What do you think?The text was updated successfully, but these errors were encountered: