HTML5 Video element on IPhone has border

Question

I have been building an app recently and have a loading animation playing at the start (just a mp4 video - for aesthetic purposes). It works great everywhere apart from on Iphon

Answer 1

I had to go with the approach of a wrapper div and a position absolute one, something like:

HTML

<div class="wrapper">
    <video loop muted autoplay playsinline>
        <source src="./video.mp4" type="video/mp4">
        <source src="./video.webm" type="video/webm">
        <source src="./video.ogv" type="video/ogg">
    </video>
    <div class="video-ios-border-fix"></div>
</div>

CSS

.wrapper {
    display: block;
    position: relative;
    font-size: 0;
}

.video-ios-border-fix {
    position: absolute;
    z-index: 1;
    box-sizing: initial;
    left: -2px;
    top: -2px;
    right: -2px;
    bottom: -2px;
    border: 4px solid #fff;
}

video {
    width: 100%;
}

Answer 2

I’ve been struggling for a few hours and found this as the only way to remove it (tested on Safari, Chrome and Firefox on iOS):

video {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

Took inspiration from this gist

Answer 3

I tried that on iOS 12 installed iPad WiFi 2017 on Safari and things were all good. Do you have any chance to video that glitch with another recording device?

Edit: General appearance cleaner -webkit-appearance: none may do the trick.