Page MenuHomePhabricator

Focus highlights for elements using CSS column-count are too tall in Chrome
Closed, ResolvedPublic8 Estimated Story Points

Description

See [[User:This, that and the other/sandbox/VE4#columns-list]].


Version: unspecified
Severity: minor
See Also:
http://code.google.com/p/chromium/issues/detail?id=391271

Event Timeline

In Firefox the text is overlapped; in Chrome it is worse - the template appears blank, and when you click on it, you get a weird transverse selection box.

  • Bug 50267 has been marked as a duplicate of this bug. ***

(In reply to comment #1)

In Firefox the text is overlapped; in Chrome it is worse - the template
appears blank

This part is now working fine.

in Chrome , when you click on it, you get a weird transverse selection box.

This is still a problem.

The transverse selection "just happens" to be the width of one column and the height that the text would take if it were not split into columns.

The problem may be in the template. A similar problem was found to be due to someone starting a set of columns with {{multicol}} but finishing it with {{col-end}} (rather than properly closing it with {{multicol-end}}). This {{columns-list}} template appears to be a wrapper for {{div col}}, but has no {{div col end}}.

Was about to report a similar bug for another template. Narrowed it down to the CSS property "column-count". It's not specific to templates (though unlikely to appear in nodes other than transclusion nodes right now).

Basically the different boundary rectangles we get from the browser for these kind of elements also seem to include a bad layer. That bad layer is horizontally centred and in the shape of how the contents would be were it divided into columns.

Created attachment 15825
Screenshot of typical two-column reflist highlighted in Chrome

Attached:

Screen_Shot_2014-07-02_at_15.26.54.png (1×1 px, 387 KB)

Created attachment 15826
Screenshot of case with more than 2 columns

In this case it's even more problematic as the column is quite narrow (the width of an individual column) and expands both ways. Thus the "top right corner" where the context menu is, can be offscreen (higher up on the page).

In the screenshot I scrolled up so that it is just about visible, but this wouldn't be the case for a regular user.

Attached:

Screen_Shot_2014-07-03_at_02.55.50.png (1×1 px, 257 KB)

This is clearly a browser bug, will file upstream, but we may have to find a workaround.

  • Bug 71625 has been marked as a duplicate of this bug. ***

Another example with {{div col}}... {{div col end}} (observed in Chromium 39.0.2171.65, looks OK in Firefox):

https://en.wikipedia.org/w/index.php?title=Chiranjeevi&oldid=635715876&veaction=edit , section "Filmography"

Jdforrester-WMF renamed this task from VisualEditor: Focus highlights for elements using CSS column-count are too tall in Chrome to Focus highlights for elements using CSS column-count are too tall in Chrome.Feb 14 2015, 2:34 AM
Jdforrester-WMF set Security to None.

Change 192240 had a related patch set uploaded (by Bartosz Dziewoński):
ve.ce.FocusableNode: Ignore children of elements using CSS column-count in Chrome

https://gerrit.wikimedia.org/r/192240

Patch-For-Review

Change 192241 had a related patch set uploaded (by Bartosz Dziewoński):
ve.ce.FocusableNode: Ignore children of elements using CSS column-count in Chrome

https://gerrit.wikimedia.org/r/192241

Patch-For-Review

Change 192240 abandoned by Bartosz Dziewoński:
ve.ce.FocusableNode: Ignore children of elements using CSS column-count in Chrome

Reason:
Whoops, wrong branch.

https://gerrit.wikimedia.org/r/192240

Change 192241 merged by jenkins-bot:
ve.ce.FocusableNode: Ignore children of elements using CSS column-count in Chrome

https://gerrit.wikimedia.org/r/192241