Focus highlights for elements using CSS column-count are too tall in Chrome
Closed, ResolvedPublic

TTO created this task.Via LegacyJun 23 2013, 7:47 AM
TTO added a comment.Via ConduitJun 24 2013, 1:26 AM

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.

Jdforrester-WMF added a comment.Via ConduitJul 11 2013, 5:32 AM
  • Bug 50267 has been marked as a duplicate of this bug. ***
TTO added a comment.Via ConduitJul 19 2013, 11:32 AM

(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.

Whatamidoing-WMF added a comment.Via ConduitJan 9 2014, 12:29 AM

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}}.

Krinkle added a comment.Via ConduitJul 3 2014, 12:54 AM

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.

Krinkle added a comment.Via ConduitJul 3 2014, 12:55 AM

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

Attached:

Krinkle added a comment.Via ConduitJul 3 2014, 12:57 AM

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:

Esanders added a comment.Via ConduitJul 3 2014, 1:42 PM

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

matmarex added a comment.Via ConduitOct 3 2014, 9:07 PM
  • Bug 71625 has been marked as a duplicate of this bug. ***
Jdforrester-WMF moved this task to Backlog on the VisualEditor workboard.Via WebNov 24 2014, 1:22 AM
Tbayer added a subscriber: Tbayer.Via WebDec 1 2014, 6:32 AM

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 changed the title 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".Via WebFeb 14 2015, 2:34 AM
Jdforrester-WMF set Security to None.
Jdforrester-WMF set Story Points to 8.Via WebFeb 17 2015, 12:50 AM
Jdforrester-WMF moved this task to Accepted on the VisualEditor 2014/15 Q3 blockers workboard.Via WebFeb 18 2015, 4:28 PM
Wittylama added a subscriber: Wittylama.Via WebFeb 18 2015, 4:36 PM
Jdforrester-WMF moved this task to Next up: Features and UX on the VisualEditor workboard.Via WebFeb 18 2015, 8:10 PM
gerritbot added a subscriber: gerritbot.Via ConduitFeb 22 2015, 8:39 PM

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

gerritbot added a comment.Via ConduitFeb 22 2015, 8:39 PM

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

gerritbot added a comment.Via ConduitFeb 22 2015, 8:39 PM

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

Jdforrester-WMF closed this task as "Resolved".Via WebFeb 23 2015, 4:54 PM
Jdforrester-WMF reassigned this task from Esanders to matmarex.
gerritbot added a comment.Via ConduitFeb 23 2015, 4:54 PM

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

Jdforrester-WMF moved this task to Done on the VisualEditor 2014/15 Q3 blockers workboard.Via WebFeb 23 2015, 5:03 PM
Jdforrester-WMF moved this task to Done on the VisualEditor workboard.Via WebFeb 25 2015, 4:27 PM

Add Comment