css - Brightness filter css : Safari vs Chrome

Question

I think my problem is simple, yet I can't find an easy fix :

Here's my website

http://www.paperkrop.com/contest

I use the brightness filter on the sides of the packs for perspective's accuracy.

When I'm on Chrome it looks like this :

When I'm on Safari (which uses -webkit-brightness like chrome) :

Let's not focus on the problem with skew and scale here, but only on the brightness :

With a brightness of 0.8, Chrome (and other browsers) take it as 80% of brightness

Safari takes it as 20% of brightness

Is there any easy fix for that ?

Thanks in advance !

EDIT : Is there a way to distinct safari from chrome in css ? or making a stylesheet only for safari ? Is that a lead ?

Answer 1

我在这方面做了一些工作，发现 chrome < 26 和 safari < 6 是“旧模型”。旧模型为 0% 是正常的不受影响的亮度，任何高达 100% 的东西都会使其比原始模型更亮，而任何负值都会更暗。

新型号100%不受影响。

我使用以下 jquery 来测试哪个模型而不是 UA 嗅探。

var oldBrightnessModel = $("<div/>").css("-webkit-filter","brightness(101%)").css("-webkit-filter")==""?true:false;

Answer 2

您是否尝试将 webkit 前缀版本设置为百分比？例如

-webkit-filter: brightness(90%);

Answer 3

血淋淋的细节：根据W3C 滤镜效果规范，Chrome 是正确的，而 Safari 是不正确的。亮度滤镜应该是 RGB 空间中的一个比例（R' = cR，G' = cG，B' = cB），但 WebKit 中的初始实现是一个平移（R' = R + c，G' = G + c, B' = B + c)。这已经被修复了，但是在 Safari 6.0 发布之后发生了变化。Chrome 选择了它，因为它的发布周期较短，但希望它也应该在下一个 Safari 版本中得到修复。