![]() ![]() You can check out my StackOverflow answer that explains this. * places parent (#circle) on its own rendering layer so overflow hidden is honored */ See the Pen LRkxxo by jonathan ( on CodePen Then overflow:hidden will work due to having the transformed element #circle be composited on its own rendering layer like its transformed child. So to solve this you have to make #circle with the overflow property be placed on its own rendering layer. But overflow:hidden is ignored since it is not on a rendering layer like its transformed child. ![]() What is happening is that when you rotate the element it gets put on its own rendering layer. This is not a GSAP bug, but the way transforms work when rendered in Chrome / Safari (webkit based browsers). That said - I don't think we're in a position to actually propose something for this yet.Hello fagan and welcome to the GreenSock forum! But, I'll need to go add some telemetry and get end user feedback to see if that holds true. I posit that you don't need it to escape the window. However, if you're asking for the ability to have anything escape its container, and possibly its window, then things will get really difficult.Īlong with the other form control styling investigations we're doing, this is actually at the top of the list of the first things I plan to dig into. Interestingly enough, this is precisely how I'd summarize what I'd want it to do, it's the heuristic we need to work out (eg: this will not be another z-index). It just draws bitmaps in a particular order (and they often still fall short in some of the examples above). For one thing, do they become modal? Under what circumstances do they fall out of this mode? Thanks for the feedback, much appreciated - it's actual useful feedback because it let's me know you're freaked out to implement it :) However, if you're asking for the ability to have anything escape its container, and possibly its window, then things will get really difficult. The native select does what was requested, for example. If you stick to native controls in CSS, then maybe it will work. All this is special behaviour for a particular UI interaction. (You might be able to programatically scroll the original window, but I wouldn't be surprised if the overlay doesn't move). You can't scroll the originating window while the overlay is up. If you swap windows (apps), it goes away. In a native control, that is a modal window that appears over everything. One of the reasons an OS window system can do this is because it doesn't have anything like the complexity of CSS layout. This isn't going to be useful feedback, but these suggestions probably sound terrifying to implementers. ![]() Perhaps we could instruct the child element to appear visible outside of its overflow container: The autocomplete list could exist outside of the overflow container, but then you lose the ability to define its layout in terms of its parent. I am not aware of any existing CSS features which solve this problem, but it's quite a common problem to have. Unfortunately however, the overflow: hidden prevents all children from overflowing, so the autocomplete list is clipped: This modal element contains another child element which should be allowed to overflow this element-an input with an autocomplete list. ![]() Because this modal contains an image, I need to use overflow: hidden in order to mask the image inside of the modal element's border-so the image doesn't overflow the modal element's border. I have a modal element with rounded borders. A way to force a child element to appear visible outside of a hidden overflow container. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |