Avatar for Username

Pomoc přepytać

Hladajće so wobšudstwa pomocy. Njenamołwimy was ženje, telefonowe čisło zawołać, SMS pósłać abo wosobinske informacije přeradźić. Prošu zdźělće podhladnu aktiwitu z pomocu nastajenja „Znjewužiwanje zdźělić“.

Dalše informacije

Tuta nitka je so archiwowała. Prošu stajće nowe prašenje, jeli pomoc trjebaće.

Diagonal divider has jagged edges in Firefox 54.01

  • 1 wotmołwa
  • 1 ma tutón problem
  • 15 napohladow
  • Poslednja wotmołwa wot cor-el

rachellerogers
rachellerogers
more options

I'm using a diagonal divider on several website pages and the bottom of the blue line comes out all jagged in Firefox 54.01. It's perfect on all other browsers. Here's the CSS I'm using: 

#et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */
  
    .diagonal-shadow::before,
    .diagonal-shadow::after {
        position: absolute;
        content: '';
        pointer-events: none;}
  
    .diagonal-shadow {
        z-index: 1;
        padding-top: 6em;
        background: #015587;}
  
    .diagonal-shadow::before,
    .diagonal-shadow::after {
        top: 0;
        left: -25%;
        z-index: -1;
        width: 150%;
        height: 75%;
        background: inherit;
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;}
  
    .diagonal-shadow::before {
        height: 50%;
        background: #015587;
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg);
        -webkit-transform-origin: 3% 0;
        transform-origin: 3% 0;}

I've attached a screenshot. It's the edges of the blue diagonal that are ragged. Any help appreciated.

Thanks.

I'm using a diagonal divider on several website pages and the bottom of the blue line comes out all jagged in Firefox 54.01. It's perfect on all other browsers. Here's the CSS I'm using: <pre><nowiki>#et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */ .diagonal-shadow::before, .diagonal-shadow::after { position: absolute; content: ''; pointer-events: none;} .diagonal-shadow { z-index: 1; padding-top: 6em; background: #015587;} .diagonal-shadow::before, .diagonal-shadow::after { top: 0; left: -25%; z-index: -1; width: 150%; height: 75%; background: inherit; -webkit-transform: rotate(-2deg); transform: rotate(-2deg); -webkit-transform-origin: 0 0; transform-origin: 0 0;} .diagonal-shadow::before { height: 50%; background: #015587; -webkit-transform: rotate(-3deg); transform: rotate(-3deg); -webkit-transform-origin: 3% 0; transform-origin: 3% 0;} </nowiki></pre> I've attached a screenshot. It's the edges of the blue diagonal that are ragged. Any help appreciated. Thanks.

Wot cor-el změnjeny

Wšě wotmołwy (1)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Try to ask advice at the Stack Overflow forum site.