[Safari] Images uploads with incorrect size

[Mgsy]

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Version of CKEditor

Latest master

📋 Steps to reproduce

1. Upload some bigger image.
2. If the issue doesn't occur, repeat step 1 few times.

✅ Expected result

The image is uploaded with a correct size.

❎ Actual result

The image is uploaded with incorrect size.

📃 Other details that might be useful

Screenshot

Tested on Safari 12.1.

[Reinmar]

Is it a regression?

[Mgsy]

It is, can't reproduce it on our demo page.

[Reinmar]

Weird things are happening there :O Looks completely as a Safari bug:

That green thing at the bottom is part of the checkmark.

[Reinmar]

Definitely Safari's bug. Toggling any style or resizing the window makes it recalculate all the things and yields different results.

[Reinmar]

From what I can see that's due to display: table that we started using.

[Reinmar]

OK, the workaround that I found is really ugly, but I can't think of something better right now: https://github.com/ckeditor/ckeditor5-image/compare/t/ckeditor5/1975?expand=1

• If we go this way we should definitely hide it behind an env check to target Safari only.
• We should also make sure that this code is not executed in unit tests – let's just ignore it there completely because testing it will be a PITA.
• We can test perhaps some other styles than display. Something less intrusive for the visual appearance. Ideas welcomed :)

[Mgsy]

OK, the workaround that I found is really ugly, but I can't think of something better right now: https://github.com/ckeditor/ckeditor5-image/compare/t/ckeditor5/1975?expand=1

I've tested your solution and it fixes this problem.

[pomek]

The same issue occurs on mobile Safari (iOS).

[oleq]

I propose a more subtle solution based on https://stackoverflow.com/a/29804327/1485219. @Mgsy can you check it out?

[Reinmar]

LGTM. Instead of a timeout you force style recalculation by accesing a property. BTW, do we need the last offsetHeight access? Or only the middle one is needed?

[oleq]

You're right. The second one is obsolete. Updated the branch.

[Mgsy]

I propose a more subtle solution based on https://stackoverflow.com/a/29804327/1485219. @Mgsy can you check it out?

Works fine 👌

[Reinmar]

OMFG, I wanted to check how to make this hack pass our tests in Safari, but this turned out to be a pandora's box: https://github.com/ckeditor/ckeditor5-image/issues/312.