Menu
I've been running into a bizarre issue affecting Microsoft Edge. I'm using the painterro javascript library for building an image editor, and mostly works very well. However some elements are not being rendered correctly and I can't figure out why. It only seems to affect Edge. Firefox, Chrome, Safari,even IE11 all work fine.
A simple page like this shows the problem:
<html>
<head>
<script src="https://github.com/ivictbor/painterro/releases/download/v0.2.57/painterro-0.2.57.min.js"></script>
</head>
<body>
<script>
Painterro().show();
</script>
</body>
</html>
When the page initally loads, the toolbar is not shown. The elements are present in the DOM and clicking on them in the Dev tool causes them to gradually appear. Resizing the browser window horizontally also causes it to appear, probably because the toolbar style changes slightly and that triggers it to redraw.
The same problem also affects the settings and colour picker dialog boxes.
I'm a bit stuck with this, it looks like a possible browser bug but I can't be sure. I haven't been able to find any other examples of anyone experiencing this issue. Has anyone else come across a similar problem?
Many thanks!
500
I too had the same issue & found that [hidden] attribute has some issue while rendering content on the web page in edge(as it worked perfectly fine in Google Chrome, Mozilla, IE) and after removing that attribute website loaded absolutely fine in Edge.
So instead of using [hidden] I use *ngIf to show and hide contents.
And the possible reason I found for this not working in Microsoft edge is:-
The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. So, Browsers won’t render elements with the hidden attribute set.
Browsers attach "display: none" styles to elements with hidden attribute. And when component gets load the style "display: none" is not updated automatically.
And *ngIf doesn’t show/hide element based on display property like hidden. It works by adding and removing elements from the DOM.
128
It was due to the use of the hidden attribute. For some reason the elements were not always being redrawn after the attribute was removed. Needs a bit more looking into, but it does look like a bug in Edge.
After replacing the hidden attribute with display:none, it works fine.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
