Avatar for Username

Hilfe durchsuchen

Vorsicht vor Support-Betrug: Wir fordern Sie niemals auf, eine Telefonnummer anzurufen, eine SMS an eine Telefonnummer zu senden oder persönliche Daten preiszugeben. Bitte melden Sie verdächtige Aktivitäten über die Funktion „Missbrauch melden“.

Learn More

Dieses Thema wurde archiviert. Bitte stellen Sie eine neue Frage, wenn Sie Hilfe benötigen.

Diagonal divider has jagged edges in Firefox 54.01

  • 1 Antwort
  • 1 hat dieses Problem
  • 11 Aufrufe
  • Letzte Antwort von 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.

Geändert am von cor-el

Alle Antworten (1)

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

Try to ask advice at the Stack Overflow forum site.