The tooltips are slightly disconnected from pointing triangles in certain environments

[mlewand]

The tooltips are slightly disconnected from pointing triangles in certain environments

📝 Provide detailed reproduction steps (if any)

I just noticed that the tooltip body is slightly disjointed from the pointer.

✔️ Expected result

The tooltip pointer should be aligned without spacing.

❌ Actual result

This is how it looks on Chrome78 @ win10:

I went to Firefox to check if it's browser dependent, and seems like it is. Here's the screenshot from Firefox:

📃 Other details

I believe the display settings are critical here.

I'm using window.devicePixelRatio = 2.5 (3840x2160 resolution).

It looks correct in the same browsers in lowDPI environments.

• Browser: Any
• OS: Win10
• CKEditor version: 15.0.0

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[oleq]

It's been a while since I started seeing it but I was too lazy to fix this :P

It's probably a regression (but old) and I could be the same fix as for blurry dropdowns could address this issue ckeditor/ckeditor5-ui#529.

[oleq]

A quick check and the following seems to address the problem:

diff --git a/theme/ckeditor5-ui/components/tooltip/tooltip.css b/theme/ckeditor5-ui/components/tooltip/tooltip.css
index 93e3172..e4dd6e5 100644
--- a/theme/ckeditor5-ui/components/tooltip/tooltip.css
+++ b/theme/ckeditor5-ui/components/tooltip/tooltip.css
@@ -12,12 +12,6 @@
 .ck.ck-tooltip {
          left: 50%;

-         /*
-          * Prevent blurry tooltips in LoDPI environments.
-          * See https://github.com/ckeditor/ckeditor5/issues/1802.
-          */
-         top: 0;
-
          /*
           * For the transition to work, the tooltip must be controlled
           * using visibility+opacity. A delay prevents a "tooltip avalanche"
@@ -58,8 +52,7 @@
           *     +-----------+
           */
          &.ck-tooltip_s {
-                  bottom: calc(-1 * var(--ck-tooltip-arrow-size));
-                  transform: translateY( 100% );
+                  top: calc(100% + var(--ck-tooltip-arrow-size));

                   & .ck-tooltip__text::after {
                            top: calc(-1 * var(--ck-tooltip-arrow-size));
@@ -79,8 +72,7 @@
           *       [element]
           */
          &.ck-tooltip_n {
-                  top: calc(-1 * var(--ck-tooltip-arrow-size));
-                  transform: translateY( -100% );
+                  bottom: calc(100% + var(--ck-tooltip-arrow-size));

                   & .ck-tooltip__text::after {
                            bottom: calc(-1 * var(--ck-tooltip-arrow-size));

[dufipl]

The issue looks like not reproducing on master anymore.