XF 1.4 Re-creating 45° corner using css

[Enguerran A]

Hello,

I'm trying to have a straight line as border for the mainContent div and I have some troubles making it working.

#content .pageContent {
background: #fff; /* if the rest doesn't work */
    background:
        linear-gradient(135deg, transparent 20px, #fff 0) top left,
        linear-gradient(225deg, transparent 0px, #fff 0) top right,
        linear-gradient(315deg, transparent 0px, #fff 0) bottom right,
        linear-gradient(45deg,  transparent 0px, #fff 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;}

At the moment, it works fine on Firefox, (I didn't try on ie) but I have some troubles with Chrome. When I scroll down, there is a weird line in the middle of the screen.

Spoiler: image

In addition, the angle of the top left corner depends on the height of the page (not the case on Firefox).
What can I do to fix that and get it working for both of them? (firefox and chrome) without sacrificing this design =)