Why such problems with the site?

Question

css

I have enough experience in layout, but I can’t understand where such problems came from. Here’s an example: tyts
1) When 3D transformation of cubes, everything is ok in chrome, in mazilla and safari the lines of these cubes go unevenly, but with steps, what’s the problem?

2) If you click on the button for example - "About us", a window will open, and if you narrow the browser window so that the block does not go crazy in height, does the scroll appear?
While the block has overflow-y: auto; .

#about {
    background-color: #dbdbdd;
    width: 50%;
    position: absolute;
    top: 20%;
    left: 10%;
    z-index: 9;
    display: none;
    overflow-y: auto;
}

Why?

Answer 1

As for anti-aliasing in mozilla and safari - old versions are not supported. I now have Fierfox 44 (Linux), the lines are displayed normally, without cubes. Another fun example:
Create a block and give it the following properties:

border-radius: 100px;
border: 1px dotted #000

The idea is that the rounded corners should be from dots, but they turn into lines. In general, in Firefox and not only in it, the trouble is with such tricks. Chances are you've come across one of these.
For the second question, add properties to the #about block:

max-height: 100%;
overflow-y: auto;

Checked on your site, it works. By the way, the site does not have overflow-y: auto , so I specified it.