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

Robert Bisewski contact at ibiscybernetics.com
Sun Jul 23 14:31:09 PDT 2017


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


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:


At lines:


106  video {
107      object-fit: contain;
109      -webkit-tap-highlight-color: transparent;
110  #endif
111  }


I altered those lines to the following:


106  video {
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:


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:



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:


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

More information about the webkit-gtk mailing list