Merge pull request #4206 from ckeditor/t/4183

Fix incorrect images dimensions in Safari

CHANGES.md

@@ -5,6 +5,7 @@ CKEditor 4 Changelog
 
 Fixed Issues:
 
+* [#4183](https://github.com/ckeditor/ckeditor4/issues/4183): [Safari] Fixed: Incorrect images dimensions when using [Easy Image](https://ckeditor.com/cke4/addon/easyimage) plugin alongside [IFrame Editing Area](https://ckeditor.com/cke4/addon/wysiwygarea) plugin.
 * [#3693](https://github.com/ckeditor/ckeditor4/issues/3693): Fixed: Incorrect default values for several [Color Button](https://ckeditor.com/cke4/addon/colorbutton) config variables in API documentation.
 * [#3795](https://github.com/ckeditor/ckeditor4/issues/3795): Fixed: Setting [`dataIndentationChars`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-dataIndentationChars) config option to an empty string is ignored and replaced by a tab (`\t`) character. Thanks to [Thomas Grinderslev](https://github.com/Znegl)!
 * [#4107](https://github.com/ckeditor/ckeditor4/issues/4107): Fixed: Multiple [Autocomplete](https://ckeditor.com/cke4/addon/autocomplete) instances cause keyboard navigation issues.

plugins/easyimage/plugin.js

@@ -275,6 +275,14 @@
 						}
 
 						image.once( 'load', function() {
+							// Sometimes Safari can't calculate correctly dimensions of the image.
+							// In such a case, force reload (#4183).
+							if ( !$image.naturalWidth ) {
+								$image.src = $image.src;
+
+								return getNaturalWidth( image, callback );
+							}
+
 							callback( $image.naturalWidth );
 						} );
 					}
@@ -289,9 +297,17 @@
 						}
 					}
 
-					var imagePart = this.parts.image;
+					var imagePart = this.parts.image,
+						isIncomplete = imagePart && !imagePart.$.complete,
+						isIncorrectlyCalculated = imagePart && imagePart.$.complete && !imagePart.$.naturalWidth;
+
+					if ( isIncomplete || isIncorrectlyCalculated ) {
+						if ( isIncorrectlyCalculated ) {
+							// Sometimes Safari can't calculate correctly dimensions of the image.
+							// In such a case, force reload (#4183).
+							imagePart.$.src = imagePart.$.src;
+						}
 
-					if ( imagePart && !imagePart.$.complete ) {
 						// If widget begins with incomplete image, make sure to refresh balloon toolbar (if present)
 						// once the image size is available.
 						getNaturalWidth( imagePart, function() {

tests/plugins/easyimage/manual/safarizerodimensions.html

@@ -0,0 +1,31 @@
+<p>Note, this test uses a real Cloud Service connection, so you might want to be on-line 😉.</p>
+
+<h2>Classic editor</h2>
+<div id="classic">
+	<figure class="easyimage easyimage-full">
+		<img alt="" sizes="100vw" src="../_assets/logo.png" srcset="../_assets/logo.png 350w" width="350" />
+	</figure>
+</div>
+
+<h2>Divarea editor</h2>
+<div id="divarea">
+	<figure class="easyimage easyimage-full">
+		<img alt="" sizes="100vw" src="../_assets/logo.png" srcset="../_assets/logo.png 350w" width="350" />
+	</figure>
+</div>
+
+<script>
+	if ( !CKEDITOR.env.safari ) {
+		bender.ignore();
+	}
+
+	var commonConfig = {
+			cloudServices_uploadUrl: easyImageTools.CLOUD_SERVICES_UPLOAD_GATEWAY,
+			cloudServices_tokenUrl: easyImageTools.CLOUD_SERVICES_TOKEN_URL
+		};
+
+	CKEDITOR.replace( 'classic', commonConfig );
+	CKEDITOR.replace( 'divarea', CKEDITOR.tools.extend( {
+		extraPlugins: 'divarea'
+	}, commonConfig ) );
+</script>

tests/plugins/easyimage/manual/safarizerodimensions.md

@@ -0,0 +1,22 @@
+@bender-tags: 4.14.2, feature, 4183
+@bender-ui: collapsed
+@bender-ckeditor-plugins: sourcearea, wysiwygarea, floatingspace, toolbar, easyimage
+@bender-include: ../_helpers/tools.js
+
+1. Switch editor to source mode.
+2. Switch back.
+
+	### Expected:
+
+	Image is visible.
+
+	### Unexpected:
+
+	Image disappeared.
+
+3. Repeat the procedure several times for every editor.
+4. Remove the image and upload another one. Repeat the procedure.
+
+### Note:
+
+Sometimes image is not visible at the beginning. It shouldn't bother you - just proceed with the test.