[webkit-gtk] Possible Twitter MP4 Video-Tag Glitch

[Robert Bisewski]

Hi,

Currently I develop a browser using the WebKit2 engine, called sighte,
which you can find here:

https://gitlab.com/ibiscybernetics/sighte

Whenever I view Twitter using my browser, I notice a sort of odd glitching
behaviour that seems to involve the height of the contents of a <video>
being reduced to about half of it's intended height. Though, this seems to
occur only in the first / last second of video playback; the remainder of
the playback is fine.

Playing around with the WebKit2 source, I was able to adjust the CSS values
in the following file to make it work properly:

https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/css/html.css

At lines:

---

106  video {
107      object-fit: contain;
108  #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
109      -webkit-tap-highlight-color: transparent;
110  #endif
111  }

---

I altered those lines to the following:

---

106  video {
107  #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
108      -webkit-tap-highlight-color: transparent;
109  #endif
110  }

---

Specifically, I deleted line 107... "object-fit: contain;" and the problem
appears to be solved.

I trac'd that line down to the following changeset:

https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/css/html.css?rev=154858

The changelog in that revision mentions the following:

---

css/html.css: (video): Set object-fit to 'contain'. This is how VIDEO
elements work, apparently.

---

Mostly I'm curious if that line is still necessary. Perhaps it was
originally added for adherence to the HTML5 standard, but the latest
internal C/C++ logic has since made it redundant? Or maybe some mobile
phone requires it? Not sure, as I am not well-versed in the history of
your code base. 

A sample affected twitter/mp4-video can be seen here:

https://twitter.com/ibiscybernetics/status/871961194931900416

---

The platform I develop for is Linux x86-64, and it seems to occur in
at least the following distros with browsers using the WebKit2 engine via
standard packages:

* arch
* debian
* ubuntu

(Firefox and Chrome appear to work fine, so I figure this isn't a
GStreamer / video codec bug)

I've noticed the problem mentioned in this email for at least a year now,
but did not think to email as I assumed I had some suboptimal configuration
present. However, at this point, I would like your thoughts on this odd
video tag w/ Twitter glitch. If that line is still needed, then I would ask
whether a work-around exists to improve Twitter usability.

If you like you can do a test of my browser by obtained the latest version
from the below git repo and run 'make' at the command line:

https://gitlab.com/ibiscybernetics/sighte

Alternatively, there exists another Linux browser which suffers from the
same problem; the suckless.org 'surf' browser. That one has packages in
the most popular Linux distros. You can use that one to test as well.

Let me know if you have further questions and I will provide more details.

Thanks in advance for your time :)

Robert Bisewski