1301106 - mobile.twitter.com can't view images

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect, P1)

Description

[Adam Stevenson [:adamopenweb]]

Attachment: No images

This was originally reported on webcompat.com https://webcompat.com/issues/3158.
In Nightly 51.0a1 (2016-09-07) for OSX and Android, images do not display on mobile twitter. Works in Firefox 48-50, Chrome, Safari. 

STR:
1) Navigate to https://mobile.twitter.com/realdonaldtrump

Expected behavior: Images in tweets display

Actual behavior: Images in tweets don't display

Disabling the -webkit-mask-image property makes images appear, as does disabling layout.css.prefixes.webkit.

._3i5pgeTp{
  -webkit-mask-image: url(data:image/png;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICRAEAOw==);
}

Comment 1

[Mike Taylor [:miketaylr]]

CJ, is this something we're already aware of?

Comment 2

[u459114]

Chrome canary has the same problem too.

If you add mask-repeat or -webkit-mask-repeat prop right bellow -webkit-mask-image, img will appear
._3i5pgeTp {
-webkit-mask-image: url(data:image/png;base64,R0lGODlhAQABAIAA///////yH5BAEKAAEALAAAAAABAAEAAAICRAEAOw==);
-webkit-mask-repeat: repeat;
}

CSS masking spec defines initial value of mask-repeat as no-repeat[1]. The mask image that tweet used is a 1x1 png, so you basically can not see anything without set mask-repeat as "repeat".

For more information, please check bug 1258623 comment 16

[1] https://www.w3.org/TR/css-masking-1/#the-mask-repeat

Comment 3

[Adam Stevenson [:adamopenweb]]

Thanks CJ! Let's move this over to TE.

Comment 4

[Adam Stevenson [:adamopenweb]]

Sent an email to Twitter regarding this issue.

Comment 5

[Xidorn Quan [:xidorn] UTC+10]

If that breaks web, should we consider asking the spec to change?

Comment 6

[Mike Taylor [:miketaylr]]

> If that breaks web, should we consider asking the spec to change?

I'm curious what CJ thinks -- is this the first mask-repeat bug (of this kind) we know about?

Comment 7

[u459114]

On(In reply to Mike Taylor [:miketaylr] from comment #6)
> > If that breaks web, should we consider asking the spec to change?
> 
> I'm curious what CJ thinks -- is this the first mask-repeat bug (of this
> kind) we know about?
On bugzilla, probably 2nd one. Astley, iirc, you mentioned a bug, repeat relative, in chatting room, do you have bug number of it?
I think we should keep watching it, and make decision after we get enough feedback from nightly and aurora channel.

Comment 8

[Adam Stevenson [:adamopenweb]]

We have a fix from Twitter. Tested in Firefox 51 for Android.
Thanks!

Comment 9

[Astley Chen (inactive)]

(In reply to Xidorn Quan [:xidorn] (UTC+8) from comment #5)
> If that breaks web, should we consider asking the spec to change?

Based on dbaron's info, this was an explicit decision in:
https://lists.w3.org/Archives/Public/www-style/2013Sep/0875.html

Comment 10

[Astley Chen (inactive)]

(In reply to C.J. Ku[:cjku](UTC+8) from comment #7)
> On(In reply to Mike Taylor [:miketaylr] from comment #6)
> On bugzilla, probably 2nd one. Astley, iirc, you mentioned a bug, repeat
> relative, in chatting room, do you have bug number of it?
> I think we should keep watching it, and make decision after we get enough
> feedback from nightly and aurora channel.

It's simply just a demo on codepen instead of a website. as tested, canary(M54) gives same result as FF51 now. 
http://codepen.io/pcridesagain/pen/bfsJy

Comment 11

[Xidorn Quan [:xidorn] UTC+10]

(In reply to Astley Chen [:astley] (UTC+8) from comment #9)
> (In reply to Xidorn Quan [:xidorn] (UTC+8) from comment #5)
> > If that breaks web, should we consider asking the spec to change?
> 
> Based on dbaron's info, this was an explicit decision in:
> https://lists.w3.org/Archives/Public/www-style/2013Sep/0875.html

That decision was purely based on the expectation, and didn't consider potential web compatibility issue. If existing impls are shipping the old behavior, and websites have been relying on that behavior, changing it could be a problem.

We should be careful if more compatibility issues come. If that happens, we may want to raise a spec issue and reverse that decision.

Comment 12

[Astley Chen (inactive)]

(In reply to Adam Stevenson from comment #8)
> We have a fix from Twitter. Tested in Firefox 51 for Android.
> Thanks!

Hi Adam, generally how much time we would expect Twitter to release this fix to public ? Thanks.

Comment 14

[Mike Taylor [:miketaylr]]

According to Comment #8 (and our twitter-mozilla mailing list), this was fixed a few days back. However testing in the latest Nightly with https://mobile.twitter.com/realDonaldTrump/status/774435151975747584, I still see the bug.

It's possible that the fix was only deployed in North America (maybe??) -- but right now in Berlin it seems like the fix hasn't been deployed.

Adam, can you check that they didn't unintentionally regress the fix?

Comment 15

[Adam Stevenson [:adamopenweb]]

Still works fine in Canada. Switching to a EU IP address the issue appears.

CSS file from Canada containing the webkit-mask-image and -webkit-mask-repeat:
https://ma-0.twimg.com/twitter-assets/responsive-web/web/ltr/main.3eec9c2ce4d25a54.css

CSS file from Canada containing the webkit-mask-image but no -webkit-mask-repeat:
https://abs.twimg.com/rweb/en/common.bundle.62455379111af8617fc280196631d0d4.css

Comment 16

[Mike Taylor [:miketaylr]]

Thanks Adam, might be good to ping them on the ML to make sure the changes will propagate (I would expect it to...).

Comment 17

[Astley Chen (inactive)]

It appears to be we should leave the bug open to reflect current status until Twitter propagate the fix to all regions. Adam, what do think ?

Comment 18

[Adam Stevenson [:adamopenweb]]

Good idea.

Comment 19

[u459114]

I will associate all relative bugs into this one

Comment 20

[Mike Taylor [:miketaylr]]

Dennis, now that you're back in Germany (and I'm back in the states) can you test if the tweet in Comment #14 has visible images in the latest Nightly?

Comment 21

[Dennis Schubert [:denschub]]

Images are visible!

Comment 22

[Mike Taylor [:miketaylr]]

Great, let's close this as FIXED then. Thanks Dennis!

Comment 23

[Jan Manthay]

Not fixed here on my devices, latest update v52, germany

Comment 24

[Adam Stevenson [:adamopenweb]]

I can still reproduce using a German IP.

Related CSS file:
https://abs.twimg.com/rweb/en/common.bundle.62455379111af8617fc280196631d0d4.css

Comment 25

[Mike Taylor [:miketaylr]]

womp womp. sorry for the false alarm -- not sure what's up twitter's global deployment strategy.

Comment 26

[Dennis Schubert [:denschub]]

Oh, I just noticed something! It works if I am logged in, but as soon as I log out, the images disappear. Maybe that's the reason for the different CSS files?

Comment 27

[Mike Taylor [:miketaylr]]

Thanks Dennis -- I emailed Twitter and they said they would raise the issue for the non-logged-in site (it seems the fix was only made for logged-in users).

Comment 28

[Gerry Chang [:gchang]]

Track for 51+ as the issue still exists.

Comment 29

[Jan Manthay]

Works for me since this night.
Germany, not logged in, Fx52.

Comment 30

[Mike Taylor [:miketaylr]]

Yep, me too. Let's close (again) as FIXED -- thanks for checking Jan!

Comment 31

[Gerry Chang [:gchang]]

Twitter has released the fix. Mark 51 as fixed.

Comment 33

[Oliver Henshaw]

The broken links part of bug 1301372 is fixed now. But the observations about image links rather than images in the conversation view for mobile.twitter.com URLs is still true for me on firefox 49.

firefox-49.0-2.fc23.x86_64 in the UK