1007945 - Ford.com buttons don't display properly in Firefox Android due to webkit CSS

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Adam Stevenson [:adamopenweb]]

On Ford.com in the "Build & Price" section there are buttons which don't display properly on Firefox for Android. Testing in Chrome on Android the buttons display correctly.

:: Steps To Reproduce

1. Open Firefox OS browser
2. Navigate to http://www.ford.com
3. Click on "Build & Price" direct link: http://mt.bp3.ford.com/#appsimHome
4. Select a vehicle and configure the cars options to the end of the wizard

:: Expected Result

All content should render the same as Chrome on Android.

:: Actual Result

You may see some issues as you configure the car, at the end the "Get Internet Price" button is washed out and so are the buttons in that sub menu.

:: Additional Information

Comment 1

[Adam Stevenson [:adamopenweb]]

Attachment: Chrome-1.png

Comment 2

[Adam Stevenson [:adamopenweb]]

Attachment: Chrome-2.png

Comment 3

[Adam Stevenson [:adamopenweb]]

Attachment: Firefox-1.png

Comment 4

[Adam Stevenson [:adamopenweb]]

Attachment: Firefox-2.png

Comment 5

[Adam Stevenson [:adamopenweb]]

Oops made a typo in the description: 1. Open Firefox OS browser
Should be: 1. Open Firefox Android browser

Comment 6

[Hallvord R. M. Steen [:hallvors]]

The problem is this -webkit-gradient without standards-compatible syntax:

ul.summary-actions li.focus span {
background-image: -webkit-gradient(linear,0 0,0 100%,from(#0271ba),to(#025d99));
color: #fff;
}

Should also fix this border-radius:

ul.summary-actions li span {
border: 1px solid #ccc;
padding: 14px 3px;
display: block;
-webkit-border-radius: 9px;
}

Comment 7

[Hallvord R. M. Steen [:hallvors]]

This gradient should be added:

    background-image: linear-gradient(to 100%, #0271ba 0%, #025d99 100%);

Comment 8

[Karl Dubost💡 :karlcow]

This is fixed.