Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Video element on IPhone has border

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 Iphone.

The issue is that there is a grey line around some of the video - not the same on every side. If i try to screenshot the page the lines are no longer visible.

I am using an iphone 7 plus and ios safari. To see for yourself see - https:pathfinder-new.herokuapp.com

The goal is for it to be seamless with the white background - example can be seen on desktop at above address.

Cheers, Tim

enter image description here

like image 851
Tim Tolley Avatar asked Sep 26 '18 01:09

Tim Tolley


2 Answers

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

like image 75
ifthenelse Avatar answered Oct 11 '22 03:10

ifthenelse


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.

like image 28
onderbakirtas Avatar answered Oct 11 '22 05:10

onderbakirtas