Neil deGrasse Tyson is blurry: BuzzFeed blurred preview photos are not shown and then not unblurred

RESOLVED FIXED

Status

defect
RESOLVED FIXED
3 years ago
2 months ago

People

(Reporter: cpeterson, Assigned: adamopenweb)

Tracking

({regression})

Trunk

Firefox Tracking Flags

(firefox46 unaffected, firefox47 unaffected, firefox48 unaffected, firefox49 fix-optional)

Details

(Whiteboard: [sitewait], URL)

(Reporter)

Description

3 years ago
description
@ Daniel: is this a website bug or a browser bug?

This is a regression from bug 1236506. I can repro this bug in Nightly 49 and Aurora 48, but not Beta 47 or earlier. I had a hard time bisecting this regression because Nightly 47 and 48 were affected, even though Beta 47 and Aurora 48 are not.

STR:
1. Load https://www.buzzfeed.com/katienotopoulos/play-23-rounds-of-the-deadliest-game-ever
2. Scroll down to photo #1 (Neil deGrasse Tyson) and click the "Click to reveal" button.

RESULT:

* PROBLEM #1: Before you click the "Click to reveal" button, there is a blurred preview photo behind the button in Chrome, Safari, IE11, and Edge but not in Firefox.

* PROBLEM #2: After you click the button, the blurred photo is replaced with a clear photo in Chrome, Safari, IE11, and Edge. In Firefox, the "Click to reveal" button is replaced with a blurred photo.
Flags: needinfo?(dholbert)
There's some UA sniffing involved here. See this.set_box_blur @ https://gist.github.com/miketaylr/f4161de8c621a65b2692f722c02d8ae5

If we disabled the filter style on the img element, I can see the expected blurry photo.

<img style="filter: url(&quot;https://img.buzzfeed.com/buzzfeed-static/static/images/public/quickpost/blur.svg#blur30&quot;);" src="https://img.buzzfeed.com/buzzfeed-static/static/2014-07/16/11/enhanced/webdr07/enhanced-buzz-19947-1405525145-4.jpg" rel:bf_image_src="https://img.buzzfeed.com/buzzfeed-static/static/2014-07/16/11/enhanced/webdr07/enhanced-buzz-19947-1405525145-4.jpg" class="bf_dom graphic_image box_blur" rel:bf_bucket="progload" alt="Neil deGrasse Tyson lounging sensuously OR a fish with a hook in its mouth?" height="596" width="625">

Still digging in...
(Before digging in too deeply, if I spoof as Chrome this site gets EXPECTED results with layout.css.prefixes.webkit=true.)
OK, so Problem 1:

In set_box_blur linked from Comment #1, 

...
} else if (_) {
  t.setAttribute("style", "filter:url(" + c + ");")
}

_ here means Gecko. c ends up as https://img.buzzfeed.com/buzzfeed-static/static/images/public/quickpost/blur.svg#blur30, which is cross-origin. CORS failure?
Simple test showing that they need to serve CORS headers with their filter: https://miketaylr.com/bzla/blur.html (or they can just remove the Gecko sniff and codepath).
For Problem 2, in the b click handler of set_box_blur from Comment #1:

If you're Chrome, the `graphic_image` class gets removed (which contains the -webkit-filter style). If you're Firefox, instead the blur.svg inline style gets removed (which was being blocked due to SOP violation) -- and now the browser can render the `graphic_image` style. Now that we support the -webkit-filter alias, the image is blurred instead of clear.

So, this is partially a regression and partially Tech Evangelism. I think the best thing to do here is try for us to get them to remove the extra _/Gecko codepath and everything should just work.™

(You'll notice if you set layout.css.prefixes.webkit to false, there is no blurry image at all. It's still broken but it's less obvious how because you just see the "Click to reveal" text: https://cloudup.com/cMoaKSHH3my).

IMO, I think we should move this to Tech Evangelism, but let's let dholbert give his opinion first.

Comment 6

3 years ago
suggestedfix
To fix this site, Buzzfeed can do the following:

In https://webappstatic.buzzfeed.com/static/css/permalink.css?v=1464032056, add an unprefixed `filter: blur(30px)` to the end of the .graphic_image style:

.sub_buzz_content .graphic_image {
  top: -67px; position: relative; 
  -webkit-transform: translate3d(0, 0, 0); 
  -webkit-filter: blur(30px); 
  -moz-filter: blur(30px); 
  -o-filter: blur(30px); 
  -ms-filter: blur(30px);
  filter: blur(30px);
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='60');  
}

(they could remove a bunch of those prefixes, but that's less important)

And in the this.set_box_blur method of https://webappstatic.buzzfeed.com/static/js/User_and_Buzz_concat_header.js?v=1464032056,

They can change u = Prototype.Browser.WebKit && !isSafari5() || isIE9() -> u = Prototype.Browser.WebKit && !isSafari5() || isIE9() || Prototype.Browser.Gecko and then they can remove the Gecko-specific codepaths (_ = Prototype.Browser.Gecko && !isIE11(), etc.)
Thanks Chris for filing, & thanks Mike for the analysis! I agree with the decision in comment 5 -- let's move this to Tech Evang and see if we can get Buzzfeed to fix this up.
Component: CSS Parsing and Computation → Desktop
Flags: needinfo?(dholbert)
Product: Core → Tech Evangelism
Version: unspecified → Trunk
(Assignee)

Updated

3 years ago
Assignee: nobody → astevenson
Whiteboard: [contactready]
(Assignee)

Comment 8

3 years ago
Reaching out to the author of the article by email: https://www.buzzfeed.com/katienotopoulos
Status: NEW → ASSIGNED
Whiteboard: [contactready] → [sitewait]
(Assignee)

Comment 9

3 years ago
Received a response "I will flag it to our Post Experience team. Thanks for the heads up!"
(Assignee)

Comment 10

3 years ago
At some point I think the site was being updated but currently it is still broken in Nightly and Dev edition.
ni? myself to try to find some alternate contacts here. https://github.com/orgs/buzzfeed/people might be a better route than the article author.

(also changing 48 to unaffected since the change in question won't hit 48 release bc webkit stuff is tied to EARLY_BETA_OR_EARLIER in 48)
Flags: needinfo?(miket)
Moving ni? to Adam, just spoke with him and he's going to reach out again.
Flags: needinfo?(miket) → needinfo?(astevenson)
(Assignee)

Comment 13

3 years ago
No response from my last follow up. Might be worth seeing if we can find a developer over there.
Flags: needinfo?(astevenson)
Marking this as fix-optional to get this of our regression triage list, since this is tech evang.
Still an issue, sadly. Also, found this better URL for testing: https://www.buzzfeed.com/caitlinosbahr/click-to-reveal-test
There's three public emails assosciated with the buzzfeed org on github: https://github.com/orgs/buzzfeed/people, might be good to email them.
(Assignee)

Comment 17

2 years ago
Thanks Mike! Reaching out to Gerard Orozco by email.
https://github.com/gerardo-orozco

Comment 18

2 years ago
This has been fixed it seems.
Hooray!
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
Component: Desktop → Desktop
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.