Opened 5 years ago

Last modified 5 years ago

#11792 review_failed Bug

[IEs] Click on the side of text in classic editor does not move caret there

Reported by: Piotrek Koszuliński Owned by: Marek Lewandowski
Priority: Normal Milestone:
Component: General Version:
Keywords: Cc:


Click on the left or right margin of editable - caret won't be moved to the closest possible solution. This is very bad for UX, because it's hard to place caret at the beginning of paragraph.

The solutions should be easy - use padding-left/right instead of margin-left/right which causes that body does not start from left:0 and does not end at right:100%, but is padded from viewport border.

Using paddings will break margins collapsing, so to avoid breaking more often used margin-top/bottom (for paragraph, headers, etc.) we should still use margin-top/bottom for the body.

If there's a different way, like using styling for HTML element, which could perhaps keep left/right margins collapsing too, I'd gladly see this solution.

Change History (8)

comment:1 Changed 5 years ago by Marek Lewandowski

Owner: set to Marek Lewandowski
Status: newassigned

comment:2 Changed 5 years ago by Marek Lewandowski

It seems that this issue occurs exclusively for win IE11.

Confirmed with IE11@Win8
Could not confirm with: IE8, IE9, IE10 @Win7

Last edited 5 years ago by Marek Lewandowski (previous) (diff)

comment:3 Changed 5 years ago by Marek Lewandowski

It's strictly contenteditable issue for IE11.

There are 2 parts about that issue:

  1. margin for body (within iframe) - the edges of the document
  2. margins between blocks (p and h1) in first few lines

Issue 1 is obvious and reasons for that are written in previous comments. It's also fixable by mentioned methods.

This has been pushed to t/11792.

Issue 2 is a little bit stranger, and it's a IE11 exclusive. The cause for caret being misplaced in few first lines is that it has image with css float property on its right, and my investigation lead to such conclusion.

As for fixing issue 2 it's more complex as it's clearly IE11 issue. Issue in MS IE backlog can be found here.

comment:4 Changed 5 years ago by Marek Lewandowski

Status: assignedreview

Since second part of the issue is out of scope of this ticket, the only thing that we need to fix is the padding issue.

I've created two branches:

  • t/11792 - with very simplified solution, but it still contains margin-top / bottom.
  • t/11792b - where editable has no margin at all, only padding in each side. First and last child of editable has margin-top / bottom set to 0.

I would go with the t/11792b option as it is more precise.

comment:5 Changed 5 years ago by Piotrek Koszuliński

The branch:t/11792b is wrong - what if not the child of body has a margin but a deeply nested descendant ;)?

I'll ask Fred and Olek to review the branch:t/11792.

comment:6 Changed 5 years ago by Olek Nowodziński


comment:7 Changed 5 years ago by Piotrek Koszuliński

Milestone: CKEditor 4.4.1
Status: reviewreview_failed

I discussed about the proposed solution with Fred and we found more which make this patch worthless:

  1. Many developers replaces entire contents.css.
  2. Absolute positioning may be broken.
  3. It affects also width.

There are too many cons therefore. Real fix for this is pretty tough though, so it's unlikely that we'll work on this issue.

comment:8 Changed 5 years ago by Jakub Ś

Other tickets that concern same source of the problem: #11280, #10792, #10613, #10169.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy