877146 - Twitter Card Preview doesn't work with Firefox, it only supports WebKit-based browsers

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Nicolas Hoffmann]

Attachment: Twitter card previsualization WebKit only

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:21.0) Gecko/20100101 Firefox/21.0 (Beta/Release)
Build ID: 20130511120803

Steps to reproduce:

I've tried to use Twitter service to implement Twitter cards, the Card validator : https://dev.twitter.com/docs/cards/validation/validator


Actual results:

The previsualisation says "Card previews are not supported in this browser. Please use a WebKit-based browser." :-& 


Expected results:

Display the previsualisation, as for every tweet that uses Twitter cards. (works on Firefox on Twitter web client)

Comment 1

[Anthony Ricaud (:rik)]

While using this in Chrome, I don't see anything obvious that Gecko can't do.

Lawrence: Do we have contacts at Twitter to look into what's preventing them to serve this content to Gecko?

Comment 2

[Lawrence Mandel [:lmandel] (use needinfo)]

Ouch. I pinged Twitter via Twitter.

https://twitter.com/mmmandel/status/339763054973685761

Comment 3

[Kohei Yoshino [:kohei]]

Changing the summary for discoverability.

Comment 5

[Adam Stevenson [:adamopenweb]]

Spoofing the UA in Firefox the blocker goes away but the preview doesn't render properly. I'm not sure what's causing it, I do see some webkit flexbox code in there. Maybe Hallvord can take a look?

Comment 6

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

Indeed - just making sure there are equivalents to the flexbox styles will go a long way:


    -webkit-box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-pack: start;
    -webkit-box-align: stretch;
    -webkit-box-orient: horizontal;

needs these standards-compatible equivalents:

    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: row;

Comment 7

[Guillaume Démésy [:magsout]]

Like I said here https://github.com/webcompat/web-bugs/issues/6#issuecomment-58801132 

Seems to work now: Firefox (Mac + Windows)  IE 11 ( Windows 7)

Comment 8

[Mike Taylor [:miketaylr]]

Thanks Guillaume. Confirmed that it's working here.