Position error with -webkit-column-count

[OrelP]

Hi,

I try to use hint.css on Chrome width the -webkit-column-count on the contenair. All is good for the first column but for the others the tooltip don't find the real position of his parent. Sample here:

http://jsfiddle.net/OrelP/S5rUV/

Have you got an solution to fix it?

Thanks,

OrelP

[Miiite]

We kept working on that issue with OrelP, turns out it's most certainly an implementation problem by Chrome. For instance, on the same fiddle, a friend of mine is seeing the tooltip perfectly, and he's using Safari as his browser.

So we'll have to wait a little more before using pure css tooltip for our projects.

[chinchang]

I investigated the issue and found that the culprit is actually this line: -webkit-transform: translate3d(0, 0, 0);

This was actually put to resolve a chrome bug long back. You can remove this line and use it for now...works gud. I'll test and see if this line is needed still or not.

[Miiite]

That is very interesting. I'll try your fix, and keep you posted. Thank you !

[truedaz]

I have a fix for this too.

This example shows the use of

transform: translateZ(0);

which fixes the cropping issue. It also shows a clever way to show the content Above the other columns blocks using z-index on hover:

https://codepen.io/HaloDesign/pen/zdRoYZ

[CodeBrauer]

I just wanted to create an issue here, but found this one. Have already a demo, where the problem is slightly bigger: Demo: https://codepen.io/gab/pen/bYMXKw

~~The fix of @truedaz sadly doesn't work for me~~

Thanks for the fix @truedaz !!! Just forget to set my elements position:relative! - Working demo: https://codepen.io/gab/pen/JOvgqz

[CodeBrauer]

Well there is now another bug occuring in Chrome 63!

Check this demo: https://codepen.io/gab/pen/JOvgqz

If you hover an item, the hint disappears after the animation...

Update: Just checked with browserstack:

Opera @ Win10

• Opera 51: Hint disappears
• Opera 50: Hint disappears
• Opera 49: working

Chrome @ Win10

• Chrome 64: Hint disappears
• Chrome 63: Hint disappears
• Chrome 62: working

Safari @ El Capitan, Sierra, High Sierra

• Safari 9.1: working
• Safari 10.1: working
• Safari 11: working

Firefox @ Win10

• Firefox 57: working

[CodeBrauer]

~~Just created a WebKit Bug: https://bugs.webkit.org/show_bug.cgi?id=182135~~

This is not a WebKit bug, it's a Blink/Chromium bug - my fault: https://bugs.chromium.org/p/chromium/issues/detail?id=806543

[chinchang]

@CodeBrauer Great! Thanks for opening it with Webkit.

[viciantomas]

@CodeBrauer You can try adding this style to your li elements

-webkit-column-break-inside: avoid;
-webkit-backface-visibility: hidden;

[CodeBrauer]

@viciantomas Sadly this did not solve the issue. (https://jsfiddle.net/6qodL2vq/2/)

[viciantomas]

@CodeBrauer Idk why but that fix for older chrome versions is messing up that lines. Look, without that fix for old chrome (wich probably almost nobody is using now) it's working. https://jsfiddle.net/6qodL2vq/6/

[CodeBrauer]

With every chrome version the behavior changes somehow? I think we have to wait till this will be fixed on Blink/WebKit in general.