Avatar for Username

Mozilla Destek’te Ara

Destek dolandırıcılığından kaçının. Mozilla sizden asla bir telefon numarasını aramanızı, mesaj göndermenizi veya kişisel bilgilerinizi paylaşmanızı istemez. Şüpheli durumları “Kötüye kullanım bildir” seçeneğini kullanarak bildirebilirsiniz.

Daha Fazlasını Öğren

Bu başlık arşivlendi. Yardıma ihtiyacınız varsa lütfen yeni bir soru sorun.

Diagonal divider has jagged edges in Firefox 54.01

  • 1 yanıt
  • 1 kişi bu sorunu yaşıyor
  • 2 gösterim
  • Son yanıtı yazan: 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 tarafından tarihinde düzenlendi

Tüm Yanıtlar (1)

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

Try to ask advice at the Stack Overflow forum site.