Images not always showing by drawing DOM objects into canvas.
Fixed, not yet flighted Issue #14695695
Details
- Author
- Niels Z.
- Created
- Nov 16, 2017
- Privacy
- This issue is public.
- Found in
- Reports
- Reported by 1 person
Sign in to watch or report this issue.
Steps to reproduce
I am drawing multiple DOM objects into a canvas. I nest XHTML inside the <foreignObject>. Beside text there are also base64 images in the XHTML. In most of the cases it works very well. Except for some where images are bit more width than others. Then images don’t show up into the canvas. This should’nt be a problem in my opinion.
I did a lot of debug and I created two very basic examples (a working and a non-working one). And the only difference between those two examples was the width and height of both images.
I am pretty sure now that this is a browser issue which I can’t solve.
Comments and activity
-
Microsoft Edge Team Changed Assigned To to “Steven K.”
-
Hi Niels,
Will you provide the examples you created or a simplified repro?
Appreciate the help,
Steve
-
Hi steve,
This JsFiddle demonstrates the two examples:
https://jsfiddle.net/d16m3j8e/Where you need to switch the comments for the images to see the difference.
Niels
-
Any status update on this?
-
Hi Niels,
I apologize for the delay.
I was able to reproduce this issue using the jsfiddle you provided. I wanted to double check and make sure we are seeing the same thing. The issue is that you are not able to see the image load for the first commented out image until you reload? That is what I am seeing. I have to press the ‘Run’ button in jsfiddle to see the image.
Will you provide the extended version of Windows 10 you are using? Win + S and type “winver” and hit enter.
Appreciate the help and your patience,
Steve
- Microsoft Edge Team
Changed Assigned To to “wptcomptri”
Changed Assigned To to “wptrentri”
Changed Assigned To from “wptrentri” to “Sergii N.”
Changed Status to “Confirmed”
-
Hi Steve,
Better late than never, because the issue is still bothering me for my application.
Yes correct, but in my application I am not able to run it again like JsFiddle without refreshing the page. So I don’t see any images at all.
The extended version of my Windows is: Version 1709 (OS Build 16299. 192).
If you need more information or help, please let me know!
Niels
- Microsoft Edge Team
Changed Assigned To from “Sergii N.” to “Sergey M.”
-
Thank you for clarifying and that makes sense.
I have some details about the issue and perhaps this information might help you create a workaround. It appears this issue is not related to the canvas or dynamically created images. It only requires an SVG element with a foreign object, which in turn contains an image. Content of foreign object renders, except for image inside.
- Microsoft Edge Team
Changed Status from “Confirmed” to “Fixed”
Changed Status from “Fixed” to “Fixed, not yet flighted”
-
The thing is that I am converting different HTML thousand of times to canvas. And in some cases it is not showing the images, for Edge only. So somewhere there must be a bug. I think I use the right approach to accomplish what I need, because this technique is working on all the other modern browsers too.
So will this become a issue the will be picked up by someone soon? Or do you disagree and do you recommend an another approach?
-
Hello,
Thank you for providing this information about the issue. We are pleased to report this feature is fixed in Edge and will be available in an upcoming insider build.
Best Wishes,
The MS Edge Team
You need to sign in to your Microsoft account to add a comment.
Sign in