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

RESOLVED FIXED

Status

RESOLVED FIXED
6 years ago
4 years ago

People

(Reporter: dante3333, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [country-all][contactready], URL)

Attachments

(1 attachment)

(Reporter)

Description

6 years ago
Created attachment 755325 [details]
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)
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?
Blocks: 763510
Status: UNCONFIRMED → NEW
Ever confirmed: true
Changing the summary for discoverability.
Summary: Twitter cards previsualisator webkit only → Twitter Card Preview doesn't work with Firefox, it only supports WebKit-based browsers

Updated

5 years ago
Duplicate of this bug: 990646
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?
Assignee: english-us → nobody
Component: English US → Desktop
Flags: needinfo?(hsteen)
Whiteboard: [country-all][contactready]
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;
Flags: needinfo?(hsteen)
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)
Thanks Guillaume. Confirmed that it's working here.
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.