Steps to reproduce
-Visit this link. ( http://ben10.cartoonnetwork.co.uk/ben-and-family )
-Scroll at the bottom of the page and you’ll notice the image disappears and comes back just before you scroll to the bottom.
Same thing happens on ( http://ben10.cartoonnetwork.co.uk/villains )
Ignore the 404 error related with hex_wht.png file as is irrelevant. I am talking about images that are there and suddely disappear and may appear at the next scroll point etc.
Play a bit on that page and you will notice that the button text disappears too.
All other browsers work fine.
What might be causing this issue?
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “James M.”
Thank you for providing this information about the issue. This appears to be caused by the overflow: hidden attribute applied to the image by a parent element; screenshot attached. Let us know if you can find a workaround, and try to provide us a reduced code sample for this problem.
The MS Edge Team
Thanks for your reply. I checked the overflow: hidden attribute and the image stays there, although, setting overflow : hidden is required for our layout.
Does that mean that what we are experiencing is a bug in the browser?
If I am not mistaken, the oveflow: hidden attribute should just clip the content that jumps outside of the parent container and it shouldn’t have an impact on the image since the image never overlfows am I right? Are there any links to a bug report or similar issues to see how other people approached it?
I tried creating a simplified version of the issue at this demo: https://codepen.io/RedGlove/pen/XzGKRg
My current workaround for the image involves swapping the order of the container’s child elements in the dom. Adding the image first in the dom seems to render it properly. But still this doesn’t make any sense and should NOT be a solution. The elements are absolutely positioned inside the container and should be visible at all the times wihtout having to change their order. Obviously, because the stacking order of absolutely positioned elements is relative to the order in which they appear in the dom, I will have to go and add z-index values if I want to bring the layer at the front visually. So basically instead of doing:
i’ll have to do:
and in my css target .car with z-index : 2 to bring it in front of the two text layers which seems like more work to achieve the same thing that the browser should do by default - and by the way, setting z-index to 2 on the image will make disappear again!! :)
So basically if I start playing with z-index values elements start to disappear again.
You can test all of that in the demo that I provided. There are 2 samples. One with the existing live code with the image disappearing (when it shouldn’t), and one with the different order markup that renders the image correctly. Play with the z-index values to see the elements disappear. Inspect the disappeared element and look at it flash in the viewport while inspecting it. Which justifies that the image is there and should be visible but it isn’t because of an internal issue.
Another related issue is the black stripe that gets cropped. I mean the div is 100% and I inspect it and the browser recognises it as full width but the background color is not applied on the whole block? For some reason this is related with the bubbles svg image added in the bennyson_title element. If I remove the bubble image the black stripe renders correctly, but when the image is there the stripe gets cropped for some reason. Any suggestions on that?
Update to a private link on codepen: https://codepen.io/RedGlove/pen/c0f150637fbbbd449dd12f13e88dd82e/
- Microsoft Edge Team
Changed Assigned To to “Scott L.”
Changed Assigned To to “bbrinza”
Changed Assigned To to “Christian F.”
I’m interested for a solution for this as well. I have an image inside a container that has a 3D rotation to it. I initially though the issue was either the 3D or the CSS animation. However adding overflow:auto made the image inside the container appear properly (if you forget the scrollbar that isn’t supposed to appear).
Tried different displays, other CSS properties as a workaround and nothing worked.
“overflow: hidden” should clip the image. Not make it disappear. Also, when the 3D animation is done, the block appears properly. Firefox, Chrome and Opera render the animation and the image properly.
I don’t know if it’s any help ? Issues seem linked.