So, I am currently working on a small project called the EVP, which is short for Experimental Video
Platform
The program itself as well as the server side stuff is all working perfectly fine, but there was a slight issue
on Google Chrome and Safari:
The preview images on the main page wouldn't align properly.
On Firefox and Edge, the images aligned correctly, but on Chrome and Safari they were crushed into each other,
every frame only having half the space they should have.
Of course, this was very weird and confusing. How could such a thing happen?
So I downloaded Google Chrome, messed around a bit with the CSS and *bang*:
The problem was caused by the following CSS rule: grid-template-rows: 20% 20% 20% 20%;.
Simply removing it fixed the problem.
That doesn't seem too weird, but somehow grid-template-columns: 18% 18% 18% 18% 18%; didn't break
anything.
As I said: CSS and Cross-Browser-Compatibility can be really weird sometimes.