Position error with -webkit-column-count
OrelP opened this issue · comments
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
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.
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.
That is very interesting.
I'll try your fix, and keep you posted. Thank you !
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:
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
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
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
@CodeBrauer Great! Thanks for opening it with Webkit.
@CodeBrauer You can try adding this style to your li elements
-webkit-column-break-inside: avoid;
-webkit-backface-visibility: hidden;
@viciantomas Sadly this did not solve the issue. (https://jsfiddle.net/6qodL2vq/2/)
@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/
With every chrome version the behavior changes somehow? I think we have to wait till this will be fixed on Blink/WebKit in general.