Closed Bug 958514 Opened 6 years ago Closed 5 years ago

tripcase.com mobile site doesn't display gradients correctly

Categories

(Web Compatibility :: Mobile, defect)

All
Android
defect
Not set

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: alefteris, Assigned: adamopenweb)

References

()

Details

(Whiteboard: [country-all][webkitcss][sitewait])

:: 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%);
  ...
}
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.
Whiteboard: [country-all][webkitcss][contactready]
Reached out on twitter to a site developer.
Assignee: nobody → astevenson
Status: NEW → ASSIGNED
Whiteboard: [country-all][webkitcss][contactready] → [country-all][webkitcss][sitewait]
Issue still exists.
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!
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.