Some CSS3 Animations not working in eBay Description

469 Views Asked by At

So eBay listings are hugely limited, but I don't see anything which suggests CSS3 wont work... I've been able to use @font-face, and some other CSS mouse over animations such as slightly zooming images out etc and they all work fine. I've also been able to add a spinning animation in another listing which happens when you hover on the image which again should suggest any CSS would work.

Previously any errors id seen with CSS has been with the way eBay parses the code and if there are any spaces it'll occasionally throw up a CSS parsing error, but once these are cleared everything runs fine, except this time where the animations still don't work.

The two phones in the following demo listing should tilt when you hover over them, but nothing is happening. Can anyone debug a reason why this might be?

Here is a test eBay listing http://www.ebay.co.uk/itm/NEW-Beats-by-Dr-Dre-Solo2-On-Ear-Headband-Headphones-Test-Listing-/301742453131

and here is a self hosted version which should work in all major browsers on OS X and Windows. http://deecies.com/ip6test.html

1

There are 1 best solutions below

3
Isaac Montaine On

Doctype is the reason why some parts of CSS3 will not work on eBay Descriptions.

The Doctype on the iframe (which is where eBay throws your description) is not defined so it can default to html 4.

Here is something to keep in mind when building a template:

There is a known issue of First Load vs Cached Load on eBay. If you view your listing in non-cached incognito window you will see that eBay doesn't throw your description into an iFrame and the Doctype is defined as HTML5. But, if you reload the page you get back to your iframe HTML 4 doctype.