firefox - 为什么 Firefox 16 改变了线性渐变的方向?

标签 firefox css

示例 CSS:

background-image: -moz-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -ms-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -o-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -webkit-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: linear-gradient(90deg, #e8f0ff, #ffffff);

这曾经导致从底部的 #e8f0ff 到顶部的 #fff 的线性渐变。

Firefox 16(几天前发布)之后,渐变现在从左侧的 #e8f0ff 到右侧的 #fff

当我删除特定于供应商的 CSS 并只留下时:

background-image: linear-gradient(90deg, #e8f0ff, #ffffff);

没有任何反应。但是,当我删除该行并仅保留特定于供应商的样式时:

background-image: -moz-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -ms-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -o-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -webkit-linear-gradient(90deg, #e8f0ff, #ffffff);

它解决了这个问题。

那么 FF16 中的新内容是什么? Xdeg 值是否从一个新方向开始,它们是否仅在某些情况下加在一起?我不明白为什么它会对两者都做 180deg 或只对一般情况做 90deg,但如果它只是供应商,则只做 90deg

问题是,Firefox 的这种新行为的具体细节是什么?对于现在在 FF16 中出现渐变错误的网站,最广泛、最符合标准的解决方案是什么?

最佳答案

The standard指示 Angular 从 0° = 向上开始顺时针测量。

using angles

For the purpose of this argument, ‘0deg’ points upward, and positive angles represent clockwise rotation, so ‘90deg’ point [sic] toward the right.

-moz-linear-gradient , on the other hand, uses polar coordinates (强调我的):

A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an <angle> defined like polar angles, that is with 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (0deg = East). They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the to keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.

关于firefox - 为什么 Firefox 16 改变了线性渐变的方向?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12868704/

相关文章:

javascript - 简单的 &lt;script&gt; 标签 - Access-Control-Allow-Origin 不允许 Origin null

javascript - Bootstrap 数据目标面板在数据父嵌套之外关闭?

css - Bootstrap 响应选项卡在移动设备上看起来不正常

api - 如何在没有 Firefox 的情况下访问 Firefox 同步书签

html - “Like” 页面被截断时的 Facebook 共享窗口

css - 固定 flexbox 布局中的可滚动区域

html - 非流体容器内的 Bootstrap 流体容器

html - 删除一个 div 内 20px 的底部边框,有什么 hack 可用吗?

jQuery 克隆() : Is this a bug with firefox or I am missing something

css - 样式表不会在 Firefox 、 IE 和 Opera 中加载