733791 - Category buttons are not rendered correctly at ehow.com

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Cristian Nicolae (:xti)]

Attachment: screenshot

Fennec/13.0a1 2012-03-06
Device: Motorola Droid Pro (Android 2.3.3)

Steps to reproduce:
1. Open Nightly.
2. Go to ehow.com.
3. Wait for the page to load.
4. Do the same on the Android Browser for comparison.

Expected results:
The page is correctly displayed.

Actual results:
The category buttons are not drawn correctly. Only the shadows are displayed.

Comment 1

[Aaron Train [:aaronmt]]

Dozens of issues and prefixed invalid webkit properties

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fv5-static.ehowcdn.com%2Fcontent%2Fcompressed%2Fcommon_webkit_header-06378d4d.css&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en

Comment 2

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

Fixed? 
Problem not found
Mozilla/5.0 (Android; Mobile; rv:23.0) Gecko/23.0 Firefox/23.0

Comment 3

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

a bit too quick there - rendering is fixed but functionality is still broken, while reading a multi-part article it doesn't work to go to next page. Errors like

Timestamp: 30. juli 2013 kl. 17.05 +0200
Error: ReferenceError: WebKitCSSMatrix is not defined
Source File: http://v5-static.ehowcdn.com/content/compressed/webkit-article-paginated-a50c8dc4.js
Line: 1

appear in the JS console.

Comment 4

[Karl Dubost💡 :karlcow]

Contacted ehow at [e-mail]

Added the following steps to help them discover the issue.

1. Go to ehow.com with Firefox for Android
2. Go to food section
3. Select one article
4. Content appears with an arrow on the right side and content.
5. Some issues:
5.1 Click on the arrow. An arrow on the left appears but nothing changes, except page number.
5.2. Two clicks on back at the top left are needed for going one step before.
5.3 Content is not scrollable.

Comment 5

[Mike Taylor [:miketaylr]]

Attachment: fixedish.png

They fixed the backgrounds, but notice how weird the text looks inside? in webkit-homepage-[hash].css, 

.ChannelListing .crafts{
	background-color:#cfb793;
	background-image:url(/ui/images/mobile/skins/channel-listing/crafts.png);
	background-position-y:8px;
	background-position-x:7px;
}

They're using the nonstandard background-position-x and -y that IE and WebKit support.

Comment 6

[Karl Dubost💡 :karlcow]

See also for longer explanation https://miketaylr.com/posts/2013/11/background-position-x-and-background-position-y-and-e-how-sitting-in-a-tree.html


Contacted on their Zendesk support.

Comment 7

[Karl Dubost💡 :karlcow]

This look fixed. The design has changed too.