1067252 - dailymotion is showing just black pictures for preview

Status: RESOLVED INVALID

(Web Compatibility :: Site Reports, defect)

Description

[Zdenek Kabelac]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:32.0) Gecko/20100101 Firefox/32.0
Build ID: 20140831202001

Steps to reproduce:

Visit dailymotion.com page.

Disable  'Age Gate'  (so it's "Off")

Look for some 'age' protected content (whatever it will be).

Now - the preview pictures remain just black boxes - while it should 'normally' contain 'blurred' version of video preview  -  correct page could be easily seen compared with 'Chrome' rendering  (there is even greasemonkey skript to remove blur).

For the non-age protected video the preview icon is shown correctly (and unblurred).

I've checked/tested this even with completely removed .mozilla dir (so clear version of firefox) as well as I've tested version 29 and nightly (35) - and all version seems to have same issue on my Fedora Rawhide box.



Actual results:

Instead of blurred preview picture just black box could be seen as video picture preview icon.


Expected results:

Blurred picture is shown.

Comment 1

[randy]

This CSS rule is causing the problem:
filter: url('data:image/svg+xml;utf8,<svgxmlns='http://www.w3.org/2000/svg'><filterid='blur'><feGaussianBlurstdDeviation='4'/></filter></svg>#blur');

Comment 2

[[:Aleksej]]

Does it depend on whether hardware acceleration is enabled (Preferences → Advanced → General; details about possible blocking are at about:support)?

Comment 3

[Robert Longson [:longsonr]]

(In reply to randy from comment #1)
> This CSS rule is causing the problem:
> filter:
> url('data:image/svg+xml;utf8,<svgxmlns='http://www.w3.org/2000/
> svg'><filterid='blur'><feGaussianBlurstdDeviation='4'/></filter></
> svg>#blur');

All the spaces are missing e.g. between svg and xmlns or between filter and id.

Comment 4

[randy]

Robert, can you explain why a filter with invalid XML should be interpreted by the browser as "make everything black"? It seems like better behavior might be to ignore the filter.

Comment 5

[Robert Longson [:longsonr]]

It makes the element not display at all per http://www.w3.org/Graphics/SVG/Test/20110816/harness/htmlObjectApproved/filters-felem-01-b.html and presumably what's behind the image is a black background div or something similar.

Comment 6

[Zdenek Kabelac]

So to get it translated for me as FF user -

Firefox will not support this - and should use Chrome for this site ?

Comment 7

[[:Aleksej]]

Or you can tell the site maintainers.

Comment 8

[Zdenek Kabelac]

And since you pointed those element pages:

Here I definitely see a bug:

http://www.w3.org/Graphics/SVG/Test/20110816/harness/htmlObjectApproved/filters-felem-02-f.html

Middle star has same shades - though I'm using 'sna'  intel driver -  but Chrome is fine on this page (on the other hand eats a lot of CPU).....

Comment 9

[Zdenek Kabelac]

Attachment: snimek.png

Middle star has extra lines inside visible.

Comment 10

[[:Aleksej]]

I see black lines on the middle star, too. 2014-09-19-03-02-02-mozilla-central-firefox-35.0a1.ru.linux-x86_64.  Maybe no acceleration: "0/1 Basic"

Comment 11

[Robert Longson [:longsonr]]

comment 8, comment 9, comment 10 have nothing to do with the originally reported issue.

Comment 12

[alan2loin]

There's a Greasemonkey script in this page resolving the issue : https://userstyles.org/styles/105099/dailymotion-preview-blur-disabler

The issue remains in FF Aurora 34 and Nightly 35

Even IE 11 shows the page correctly (!)

Comment 13

[Karl Dubost💡 :karlcow]

Are all the browsers receiving the same code? :)

0. With Firefox 32.0.2 on Mac OS X
1. Going to http://www.dailymotion.com/
2. Receiving the Japanese page http://www.dailymotion.com/jp
3. Switching the language http://www.dailymotion.com/us
4. Setting Age Gate OFF (in the footer)
5. Searching "sex", receiving black squares list.

Inspecting

<img class="preview blurred" alt="Sex Scene in Blue Is the Warmest Color (2013)" title="Sex Scene in Blue Is the Warmest Color (2013)" src="http://s2.dmcdn.net/FWpV1/x240-y9p.jpg">

.sd_video_previewtwig .blurred {
   filter:url("data:image/svg+xml;utf8,<svgxmlns='http://www.w3.org/2000/svg'><filterid='blur'><feGaussianBlurstdDeviation='4'/></filter></svg>#blur");
   -webkit-filter:blur(4px);
   -ms-filter:'progid:DXImageTransform.Microsoft.Blur(pixelradius=3)';
   margin-left:-5px;
   margin-top:-5px;
   width:110%;
   height:110%}

The difference of behaviors in between Firefox, WebKit/Blink and Microsoft is due to them not using the same CSS rule.

There are a couple of issues for the SVG filters. The spaces AND the fact to not have escaped the XML code. It can't work.

The correct code is:

  filter:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cfilter%20id%3D%22blur%22%3E%3CfeGaussianBlur%20stdDeviation%3D%225%22%2F%3E%3C%2Ffilter%3E%3C%2Fsvg%3E#blur");
  -webkit-filter:blur(4px);
  -ms-filter:'progid:DXImageTransform.Microsoft.Blur(pixelradius=3)';

See the reduced test case I put online at
http://www.la-grange.net/2014/09/23/svg-blur/filter


I will contact dailymotion.

Comment 14

[Karl Dubost💡 :karlcow]

DailyMotion has been contacted today by email.

Comment 15

[kalviskajaks]

Its been more than 2 months now. Cant firefox at least fail gracefully, and at least not break the thumbnails if it gets served broken filter instructions. Like IE does? Thumbnail without applied blur filter is obviously a better result than no thumbnail at all.

Comment 16

[Karl Dubost💡 :karlcow]

@kalviskajaks

It's difficult. The CSS property is *understood*. It's not failing for the CSS parser. What is failing is the image which has a bug and that Firefox can't display. Think for example an image with a network issue and a 403 Not Found.

This could be a proposal, maybe worth opening a new bug if it's not yet open. Let's try.

Comment 17

[Karl Dubost💡 :karlcow]

I opened 
    Bug 1105145 - When a CSS filter URL fails on an img element, the src image is not displayed
Thought I'm still not sure it's a correct analysis. 
@kalviskajaks you might be able to help by creating a reduced test case for it. Thanks.

Comment 18

[Karl Dubost💡 :karlcow]

recontacted daily motion today.

Comment 19

[arni2033]

CC'ing. I've send them an email half a year ago.
Escaped code is OK, but now they have 3 slashes in their SVG namespace, so it still doesn't work   v_v

Comment 20

[Mike Taylor [:miketaylr]]

Karl, did they ever reply? We support the blur filter CSS now, so they could just remove that rule.

Comment 21

[Karl Dubost💡 :karlcow]

Nope never replied nor acknowledged. Pinged 3 times.
We could try with the CTO https://twitter.com/guillaumclement

Also https://github.com/orgs/dailymotion/people
let me try with https://github.com/dharFr


The current code is:

```css
.sd_video_preview .blurred {
	width: 110%;
	height: 110%;
	margin-left: -5px;
	margin-top: -5px;
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-ms-filter: blur(3px);
	-o-filter: blur(3px);
	filter: blur(3px);
	filter: url("data:image/svg+xml;utf8,<svg xmlns='http:///www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='3'/></filter></svg>#blur");
	filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3)";
}
```

when removing the SVG filter, it's working perfectly in Firefox.


```css
.sd_video_preview .blurred {
	width: 110%;
	height: 110%;
	margin-left: -5px;
	margin-top: -5px;
	-webkit-filter: blur(3px);
	-ms-filter: blur(3px);
	-o-filter: blur(3px);
	filter: blur(3px);
	filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3)";
}
```

Comment 22

[Karl Dubost💡 :karlcow]

Contacted by email today.

Comment 23

[Karl Dubost💡 :karlcow]

I have the feeling this issue is now invalid. The UI of dailymotion has totally changed. And there's no blur anymore or the adult content is gone.