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

[Piotrek Koszuliński]

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.

[Marek Lewandowski]

It seems that this issue occurs exclusively for win IE11.

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

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

[Marek Lewandowski]

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.

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

[Olek Nowodziński]

cc

[Piotrek Koszuliński]

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.

[Jakub Ś]

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