Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Image disappears in Safari when switching to source mode and back #4183

Closed
jswiderski opened this issue Jul 30, 2020 · 6 comments
Closed

Image disappears in Safari when switching to source mode and back #4183

jswiderski opened this issue Jul 30, 2020 · 6 comments
Assignees
@Comandeer
Labels
browser:safari The issue can only be reproduced in the Safari browser. status:confirmed An issue confirmed by the development team. support An issue reported by a commercially licensed client. type:bug A bug.
Milestone
4.15.0

Comments

@jswiderski
Copy link
Contributor

jswiderski commented Jul 30, 2020 •
edited
Loading

Type of report

Bug

Provide detailed reproduction steps (if any)

  1. Upload na image using Easy Image
  2. Switch to Source mode and back

Expected result

Image is visible in wysiwyg mode

Actual result

Only html is visible in source mode but there is no image in wysiwyg mode
 

safari

Other details

  • Browser: Safari
  • OS: Mac
  • CKEditor version: 4.9.0 (when EI has been introduced)
  • Installed CKEditor plugins: easyimage

NOTE: Problem can be reproduced in Classic as well as DivArea editor.
@jswiderski jswiderski added type:bug A bug. status:confirmed An issue confirmed by the development team. browser:safari The issue can only be reproduced in the Safari browser. labels Jul 30, 2020
@jswiderski
Copy link
Contributor Author

Could be related to #778.

NOTE: When reproducing the problem natively, I have been only able to reproduce this problem in iframe (although in CKEditor, I can reproduce it in iframe as well as divarea) and only when dev-tools were disabled. 

<div id="testdiv1" style="margin:20px; width:500px; height:200px; border:1px solid black;"></div>
<script type="text/javascript">
	document.getElementById( 'testdiv1' ).innerHTML = 
	'<figure class="easyimage easyimage-full">'+
	'<img alt="" sizes="100vw" src="https://16589.cdn.cke-cs.com/Ru5MR2sQZt6979jkyNnp/images/d02e4ac3b46cb9b82c08f97e9374cf7367ff033027551aa5.png" srcset="https://16589.cdn.cke-cs.com/Ru5MR2sQZt6979jkyNnp/images/d02e4ac3b46cb9b82c08f97e9374cf7367ff033027551aa5.png/w_133 133w" width="133" />'+
	'<figcaption></figcaption>'+
	'</figure></body></html>';
</script>

<div id="testdiv2" style="margin:20px; width:500px;"></div>
<script type="text/javascript">
function createIframe() {
	var fragment = document.createDocumentFragment(),
		iframe = document.createElement( 'iframe' );
	
	iframe.setAttribute( 'width', '500px' );
	iframe.setAttribute( 'height', '200px' );
	iframe.setAttribute( 'id', 'testIframe' );
	//iframe.setAttribute( 'scrolling', 'yes' );	
	var html = '<!DOCTYPE html><html><title>Cursor Stays</title><head><meta charset="utf-8"></head><body contenteditable="true">'+
	'<figure class="easyimage easyimage-full">'+
	'<img alt="" sizes="100vw" src="https://16589.cdn.cke-cs.com/Ru5MR2sQZt6979jkyNnp/images/d02e4ac3b46cb9b82c08f97e9374cf7367ff033027551aa5.png" srcset="https://16589.cdn.cke-cs.com/Ru5MR2sQZt6979jkyNnp/images/d02e4ac3b46cb9b82c08f97e9374cf7367ff033027551aa5.png/w_133 133w" width="133" />'+
	'<figcaption></figcaption>'+
	'</figure></body></html>';
	
	iframe.setAttribute( 'src', 'data:text/html;charset=utf-8,' + encodeURI( html ) );
	fragment.appendChild( iframe );
	document.getElementById( 'testdiv2' ).appendChild( fragment );
			
}
createIframe();

@jswiderski jswiderski added the support An issue reported by a commercially licensed client. label Jul 30, 2020
@jswiderski
Copy link
Contributor Author

As a workaround, users could use Inline CKEditor with Source Dialog plugin:
https://ckeditor.com/docs/ckeditor4/latest/examples/inline.html
https://ckeditor.com/cke4/addon/sourcedialog

or Classic Editor with Source Dialog plugin, but they will need to configure the toolbar to drop classic 'Source' button and replace it with 'Sourcedialog' button. Fortunately one can use, Online Builder (to add Source Dialog to build) as well as toolbar configurator available in each build: https://ckeditor.com/docs/ckeditor4/latest/features/toolbar.html, https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-toolbar

@cantonbecker
Copy link

Note that this bug is not limited to switching back and forth from Source to WYSIWYG. More significantly, images simply won't show on Safari if they are simply pre-loaded in the <textarea> being targeted. Switching back and forth from source is just the fastest way to demonstrate the problem.

Steps:

  1. Add a <textarea> to your page which includes the HTML for a previously loaded Easy Image
  2. Target the <textarea> with Ckeditor4 + easy image
  3. Result: On Safari, the image will not display.

Screenshot 2020-07-30 09 11 12

@jswiderski
Copy link
Contributor Author

jswiderski commented Jul 31, 2020 •
edited
Loading

@cantonbecker I haven't been able to reproduce your case in inline editor (Classic editor has this problem). Whenever I load content from EI into inline editor, everything works as expected in my case.

@Comandeer Comandeer self-assigned this Aug 11, 2020
@Comandeer
Copy link
Member

I've reported a bug to WebKit. Basically it seems that when img element with [srcset] attribute is added to dynamically created iframe element (like CKE4 in classic mode), then its dimensions are set to 0, despite the real dimensions, resulting in invisible image.

I wasn't able to reproduce it on non-`iframe` based editor.

I'm not sure if we can fix it on our side. The only solution I can think of is just forcing the image to reload, if it has 0x0 dimensions. But for editors with many images that can become cumbersome.

@msamsel msamsel mentioned this issue Aug 11, 2020
Open
@Comandeer Comandeer mentioned this issue Aug 16, 2020
Merged
3 tasks
@Dumluregn
Copy link
Contributor

Closed in a5ec67e.

@f1ames f1ames added this to the 4.15.0 milestone Aug 31, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Comandeer Comandeer

Labels
browser:safari The issue can only be reproduced in the Safari browser. status:confirmed An issue confirmed by the development team. support An issue reported by a commercially licensed client. type:bug A bug.
Projects
None yet
Milestone
4.15.0
Development

No branches or pull requests
5 participants
@f1ames @Comandeer @cantonbecker @jswiderski @Dumluregn