Diagonal divider has jagged edges in Firefox 54.01
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.
cor-el tarafından
Tüm Yanıtlar (1)
Try to ask advice at the Stack Overflow forum site.