958514 - tripcase.com mobile site 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 tripcase.com in the browser address bar

:: Expected Result

We get the mobile site. The sign-up button has a green gradient background, as it is when visiting with iOS Safari.

:: Actual Result

The sign-up buttons have no background gradient and the button text is difficult to read. The site uses only the webkit prefix for CSS gradients:

.tc-button-green {
  ...
  background-image: -webkit-linear-gradient(top, #669135 0%, #496b23 100%);
  ...
}

Comment 1

[Mike Taylor [:miketaylr]]

https://www.tripcase.com/touch2/mobile/css/combined.css

  .tc-button-grey:hover, .tc-button-grey:active {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
    background-image: -webkit-linear-gradient(top, #dddddd 0%, #aaaaaa 100%);
    background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 100%); }
.tc-button-green {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #669135), color-stop(100%, #496b23));
  background-image: -webkit-linear-gradient(top, #669135 0%, #496b23 100%);
  background-image: linear-gradient(top, #669135 0%, #496b23 100%);
  border: 1px solid #496b23; }
  .tc-button-green:hover, .tc-button-green:active {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #496b23), color-stop(100%, #38521b));
    background-image: -webkit-linear-gradient(top, #496b23 0%, #38521b 100%);
    background-image: linear-gradient(top, #496b23 0%, #38521b 100%); }

I'm terrible at CSS gradient syntax, but the unprefixed variant here is using an older version (and results in a parse error. See https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient for reference.

Comment 2

[Adam Stevenson [:adamopenweb]]

Reached out on twitter to a site developer.

Comment 3

[Adam Stevenson [:adamopenweb]]

Another related bug: https://bugzilla.mozilla.org/show_bug.cgi?id=958510

Comment 4

[Adam Stevenson [:adamopenweb]]

Issue still exists.

Comment 5

[Karl Dubost💡 :karlcow]

The gradients have been fixed. 
Interesting things, they are using a lot webkit flexboxes, but that doesn't really change the layout inside the document.

Closing as FIXED.
Thanks Adam!