Avatar for Username

تلاش سپورٹ

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

مزید سیکھیں

اس تھریڈ کو آرکائیوکیا گیا تھا۔ اگر آپ کو مدد کی ضرورت ہو تو براہ مہربانی نیا سوال پوچھیں۔

Diagonal divider has jagged edges in Firefox 54.01

  • 1 جواب دیں
  • 1 میں یہ مسئلہ ہے
  • 15 دیکھیں
  • آخری جواب بذریعہ 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.

cor-el کی جانب سے میں ترمیمکی گئ

تمام جوابات (1)

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

Try to ask advice at the Stack Overflow forum site.