Closed Bug 1067252 Opened 6 years ago Closed 2 years ago

dailymotion is showing just black pictures for preview

Categories

(Web Compatibility :: Desktop, defect)

Firefox 32
x86_64
Linux
defect
Not set

Tracking

(Not tracked)

RESOLVED INVALID

People

(Reporter: zdenek.kabelac, Assigned: karlcow)

References

(Blocks 1 open bug, )

Details

(Whiteboard: [country-fr] [css] [sitewait])

Attachments

(1 file)

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.
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');
Does it depend on whether hardware acceleration is enabled (Preferences → Advanced → General; details about possible blocking are at about:support)?
Component: Untriaged → SVG
Product: Firefox → Core
(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.
Status: UNCONFIRMED → RESOLVED
Closed: 6 years ago
Resolution: --- → INVALID
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.
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.
So to get it translated for me as FF user -

Firefox will not support this - and should use Chrome for this site ?
Or you can tell the site maintainers.
Component: SVG → Desktop
Product: Core → Tech Evangelism
Version: 32 Branch → Firefox 32
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 (!)
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.
Assignee: nobody → kdubost
Status: RESOLVED → REOPENED
Ever confirmed: true
Resolution: INVALID → ---
Whiteboard: [country-fr] [css] [contactready]
Status: REOPENED → ASSIGNED
DailyMotion has been contacted today by email.
Whiteboard: [country-fr] [css] [contactready] → [country-fr] [css] [sitewait]
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.
@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.
Blocks: 1105145
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.
recontacted daily motion today.
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
Karl, did they ever reply? We support the blur filter CSS now, so they could just remove that rule.
Flags: needinfo?(kdubost)
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)";
}
```
Flags: needinfo?(kdubost)
Contacted by email today.
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.
Status: ASSIGNED → RESOLVED
Closed: 6 years ago2 years ago
Resolution: --- → INVALID
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.