Bug 182135 - Pseudo elements not displayed correctly in columns
Summary: Pseudo elements not displayed correctly in columns
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Local Build
Hardware: All All
: P2 Normal
Assignee: Nobody
URL: https://jsfiddle.net/d8cw85tw/
Keywords:
Depends on:
Blocks:
 
Reported: 2018-01-25 12:15 PST by Gabriel
Modified: 2018-01-27 14:21 PST (History)
4 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Gabriel 2018-01-25 12:15:43 PST 
To keep it short:
This demo worked till Chrome 62/Opera 49: https://codepen.io/gab/pen/JOvgqz

Before Chrome 63+: Hover on a <li> will show a pseudo element.
Since Chrome 63+: Hover on a <li> will show a pseudo element, unless the transition finishes. If there is no transition set the pseudo element doesn't show up at all.

For some reason the pseudo element hides after the transition is finished. Removing that transition the pseudo element isn't displayed at all.
Also the pseudo element will be clipped off and shown in the next CSS column.

Related GitHub Issue: https://github.com/chinchang/hint.css/issues/60 // Specially this comment https://github.com/chinchang/hint.css/issues/60#issuecomment-357182990
Comment 1 Simon Fraser (smfr) 2018-01-26 14:58:12 PST 
This is not the place to file Chrome issues (Chrome uses the Blink engine, not WebKit).

Does the bug reproduce in Safari?
Comment 2 Gabriel 2018-01-27 14:03:43 PST 
Silly me! Clearly forgot about that. Thanks for pointing out.
Comment 3 Gabriel 2018-01-27 14:21:52 PST 
Moved here: https://bugs.chromium.org/p/chromium/issues/detail?id=806543

*So people coming from search engine can follow this bug.