Inconsistency in preview field for images with % heights

[Teresa Monahan]

To reproduce:

1. Open the replacebyclass sample in FF/IE/Opera.
2. Right click on the image and set the width and height to 100%
3. Repeat steps 1 and 2 in Safari/Chrome.
4. Compare the preview field in the 2 browsers.

Problem: In Safari and Chrome, the image is skewed and fits exactly in the preview field without scrolling. In FF, IE and Opera, the aspect ratio of the image remains intact and it is necessary to scroll the preview field to see the bottom of the image.

This seems to be a browser issue regarding how % heights are interpreted. Is there anything CKEditor can do to make this consistent across all browsers?

[Jakub Ś]

I have checked this in latest browsers and result seems to be opposite. In Webkit you have to scroll image while in other browsers image fits div perfectly.

I have used editor HTML and CSS classes in plain HTML page. Result was of course the same. I'm attaching sample file and will try to look for some solution to this later.

[Jakub Ś]

I am attaching another sample with quick solution that worked across all browsers. All I did was replacing table with <div style="white-space: normal;">. Perhaps same solution could be used in dialog.

This needs further testing but I think it is enough to confirm this issue.

[Jakub Ś]

Sample with working solution

[Wiktor Walc]

Note that the results differ on standard and full presets. Having exactly the same content the size of the image is different in the preview window, depending on the preset. Confirmed in Firefox and Chrome.

[Wiktor Walc]

Full preset:

Standard preset: