With the iOS version 15.5 the CCS object-fit attribute does not work initially on Safari with videos anymore. When we inspect the DOM and uncheck the attribute, to recheck it, it works. But, of course that's not a proper workaround. Adding "important" does not work as well. If you reset the height: The result is flickering. On 15.4 everything works as expected.
BUG Report: 15.5 Video object-fit:fill Does not work anymore on load
hi, I also have the same problem. Have you found the solution?
Same issue here. Just updated to 15.6 and the issue is still present.
I notice this on iOS Chrome as well—the object-fit property doesn't seem to be applied until after the page has loaded. This creates a weird flash of the incorrectly sized video before it's fully loaded. https://discourse.webflow.com/t/object-fit-on-background-video-doesnt-apply-until-after-page-is-loaded/216759
Hello I have the same problem on iPhone XR and iPhone 14 Pro on both Chrome and Safari
Can't upload photos or iPhone screen captures (:/) but it's essentially the same behaviour as @jmsv's post
const playerStyles: (loaded: boolean) => CSSProperties = (loaded) => ({
position: 'absolute',
backgroundColor: 'bck.900',
left: 0,
top: 0,
width: '100vw',
objectFit: 'cover',
objectPosition: 'center',
opacity: loaded ? 1 : 0,
transition: 'opacity 0.2',
transitionDelay: '0.1'
});
I have the same Problem. I tried:
- using inline styles,
- css aspect-ratio + different with / height attributes
On iOS 16 in Safari + Chrome you can see the video changing from object-fit: contain to object-fit: cover during page load.
Does anyone have a fix?
I had a same problem.. Setting min-height: 100% worked for me. I found a solution here: https://stackoverflow.com/a/67875722/5424783