adf.ly - design is broken

[winardiaris]

URL: http://adf.ly/

Browser / Version: Firefox 57.0
Operating System: Linux
Tested Another Browser: Yes

Problem type: Design is broken
Description: different style color
Steps to Reproduce:
open http://adf.ly/ in firefox 57.0b5 and chrome 61.0.3163.91
scroll down and look at Join Now button

From webcompat.com with ❤️

[miketaylr]

Interesting. It's kinda like the gradients are reversed.

.yellowButton, section.vertising section.rates table.rates .orderSummary input, table.campaign input[type="button"], table.campaign input[type="submit"] {
    margin-top: 15px;
    font-family: Arial,sans-serif;
    font-size: 21px;
    background-color: #ffdc70 !important;
    width: auto;
    height: 55px;
    color: #826f2f;
    border: 1px solid #bfa65a;
    border-radius: 3px;
    border-top-color: #ffffc1;
    border-right-color: #aa9249;
    border-bottom-color: #917b36;
    border-left-color: #ad964c;
    background-image: linear-gradient(bottom,#FFCA2A 1%,#FFE28A 51%);
    background-image: -o-linear-gradient(bottom,#FFCA2A 1%,#FFE28A 51%);
    background-image: -moz-linear-gradient(bottom,#FFCA2A 1%,#FFE28A 51%);
    background-image: -webkit-linear-gradient(bottom,#FFCA2A 1%,#FFE28A 51%);
    background-image: -ms-linear-gradient(bottom,#FFCA2A 1%,#FFE28A 51%);
    background-image: -webkit-gradient(linear,left bottom,left 2,color-stop(0.01,#FFCA2A),color-stop(0.51,#FFE28A) );
    text-shadow: 0 1px #ffffc1;
    box-shadow: 0 -1px #bfa65a;
    padding-left: 12px;
    padding-right: 12px;
}

(this might be due to our -webkit-gradient emulation, which isn't perfect, but there's a gradient. 😄 )

[softvision-sergiulogigan]

Looks like the issue is still around:

This is on Windows 10, Nightly 61 and Chrome 66.

Looks like disabling the background-image: -webkit-gradient( linear, left bottom, left 2, color-stop(0.01, #FFCA2A), color-stop(0.51, #FFE28A) ) property of the "Join Now" (for example), the gradient is corrected.

[karlcow]

@softvision-sergiulogigan Good analysis.

Basically they should put the CSS property in the right order.

.yellowButton, section.vertising section.rates table.rates .orderSummary input, table.campaign input[type="button"], table.campaign input[type="submit"] {
	margin-top: 15px;
	font-family: Arial, sans-serif;
	font-size: 21px;
	background-color: #ffdc70 !important;
	width: auto;
	height: 55px;
	color: #826f2f;
	border: 1px solid #bfa65a;
	border-radius: 3px;
	border-top-color: #ffffc1;
	border-right-color: #aa9249;
	border-bottom-color: #917b36;
	border-left-color: #ad964c;
	background-image: linear-gradient(bottom, #FFCA2A 1%, #FFE28A 51%);
	background-image: -o-linear-gradient(bottom, #FFCA2A 1%, #FFE28A 51%);
	background-image: -moz-linear-gradient(bottom, #FFCA2A 1%, #FFE28A 51%);
	background-image: -webkit-linear-gradient(bottom, #FFCA2A 1%, #FFE28A 51%);
	background-image: -ms-linear-gradient(bottom, #FFCA2A 1%, #FFE28A 51%);
	background-image: -webkit-gradient( linear, left bottom, left 2, color-stop(0.01, #FFCA2A), color-stop(0.51, #FFE28A) );
	text-shadow: 0 1px #ffffc1;
	box-shadow: 0 -1px #bfa65a;
	padding-left: 12px;
	padding-right: 12px;
}

aka in the group

	background-image: linear-gradient(bottom, #FFCA2A 1%, #FFE28A 51%);
	background-image: -o-linear-gradient(bottom, #FFCA2A 1%, #FFE28A 51%);
	background-image: -moz-linear-gradient(bottom, #FFCA2A 1%, #FFE28A 51%);
	background-image: -webkit-linear-gradient(bottom, #FFCA2A 1%, #FFE28A 51%);
	background-image: -ms-linear-gradient(bottom, #FFCA2A 1%, #FFE28A 51%);
	background-image: -webkit-gradient( linear, left bottom, left 2, color-stop(0.01, #FFCA2A), color-stop(0.51, #FFE28A) );

they should put the standard one last.

	background-image: -o-linear-gradient(bottom, #FFCA2A 1%, #FFE28A 51%);
	background-image: -moz-linear-gradient(bottom, #FFCA2A 1%, #FFE28A 51%);
	background-image: -webkit-linear-gradient(bottom, #FFCA2A 1%, #FFE28A 51%);
	background-image: -ms-linear-gradient(bottom, #FFCA2A 1%, #FFE28A 51%);
	background-image: -webkit-gradient( linear, left bottom, left 2, color-stop(0.01, #FFCA2A), color-stop(0.51, #FFE28A) );
	background-image: linear-gradient(bottom, #FFCA2A 1%, #FFE28A 51%);

or even better just put the standard one :)

What is happening is that because of sites implementing only -webkit- stuff. Firefox had to implement an alias for -webkit-gradient and as it is the latest one in the list of CSS rules, the cascade is taken into account and is applied as it should.

Moving to needscontact

[karlcow]

The contact page is tied to a login…
https://twitter.com/AdFly useless for contacting.
Maybe https://www.linkedin.com/in/ad-fly-3826b5129

[karlcow]

sent a message through linkedin.