958502 - tripit.com mobile landing page doesn't display gradients correctly

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Thanos Lefteris [:alefteris]]

:: Steps To Reproduce

1. Open Firefox for Android browser
2. Type tripit.com in the browser address bar

:: Expected Result

We get a mobile landing page with different buttons to choose our next destination. The top button that links to the Android app Google Play store page should have the text "Download FREE Android App" and it should have an orange gradient background.

:: Actual Result

The top button has no background color and it's text is not visible. The CSS for the page uses only the webkit prefix for the button background gradient:

background: -webkit-gradient(linear,left top,left bottom,from(#fc9f30),to(#ce7002));

Comment 1

[Mike Taylor [:miketaylr]]

https://www.tripit.com/css/uhp/index-noblackberry.css?v=r58173

.button.orange{
	color:#FFF;
	background:-webkit-gradient(linear,left top,left bottom,from(#fc9f30),to(#ce7002));
	border:1px solid #ce7002
}

We should reach out and ask that they add non-prefixed gradients, or at least a solid background-color before the webkit-gradient.

Comment 2

[Adam Stevenson [:adamopenweb]]

Appears to be fixed, verified on Nightly that orange gradient for "Download FREE iPhone App" appears.