Does anybody know why the overflow isn’t being hidden on this element on a mobile device?
Works on Desktop, also works on mobile view in the inspector, also works in mobile view on Preview mode. Just not on an actual mobile device (iPhone X in my case).
Issue persists in both Chrome and Safari:
Correct:
Incorrect:
Read only link: Webflow - SocialFlight Instagram Growth
Which element are you setting to display none? Not sure if it’s the Div 67 but it doesn’t have the same border radius as masked so whatever is underneath is visible in the corners.
Assuming you mean overflow hidden and not display none, I’ve got the “masked” element set to overflow hidden.
Hmm, not sure that’s the issue. Tested adding the same border radius to Div 67 just to be sure though. Didn’t help.
The masked element having overflow hidden should be hiding the stuff visible at the corners and it works, just not on a mobile device for some reason.
Okay overflow hidden won’t work for that. It is used on the div element and anything within that div element won’t show up past the boundaries of the div. For instance, if you increase the button size to 400 px you will see it won’t go out of the bounds of the container. But the item behind is not in that div.
What you are seeing I think is the background video container behind it. But background videos don’t work on mobile devices generally. Which I think is what you are seeing the static image webflow generates behind it which doesn’t seem like it can be styled.
You can create another div and place all of the background video and nested divs within it.
apply the overflow hidden to that and border-radius. It eliminates the edges.
Overflow hidden does work for that, it’s working right now on Desktop, it is also working on mobile preview mode and Chrome’s inspector tool in mobile mode.
Background videos do work on mobile, it’s working now and i’ve used it in the past as well successfully.
For anybody just coming to this thread, the question in the initial post still stands, sorry for the clutter…
I apologize as I was working on an old assumption of how the background videos used to work in Webflow. That is a mobile breakpoint the bg video changed to a static image. I thought the static image was not positioned in the div like the background video.
Might be a compatibility issue with the browser because I tested it on 3 on my samsung phone chorme, opera and the samsung browser, and the bg videos are running fine and there is no issues with the corners.
