Firefox 16.0.1 is messin' with the css!

rod barbee · 2012-10-13 03:47:30

Yikes. The gradients on my web site just took a 90 degree turn! Although the menu bar looks kinda cool, I'd rather be the one in control of things
Everything looks like it should in other browsers but the latest version of Firefox is having some interpretation problems or something.
Thought it might be a problem with my pc so I checked my laptop and all looked fine in Firefox 13.x but when I updated to 16.0.1, the gradients took that same hard right turn.
That's the only issue I've seen so far but I wouldn't be surprised if other css related problems cropped up. I did send in a report on this but it wouldn't hurt if others did the same, assuming you're seeing the same things I'm seeing.

Matthew · 2012-10-13 09:46:37

Apparently, CSS3 Animations, Transitions, Transforms and Gradients have been unprefixed in Firefox 16, and the gradients syntax has changed. I suppose this will warrant updates. And this is what happens when we implement prefixed features in web-design ...

Details here:
https://hacks.mozilla.org/2012/07/aurora-16-is-out/

rod barbee · 2012-10-19 01:30:21

I was able to correct things by changing the gradient angle in the css from 0 to 90
For my menu:

background-image: linear-gradient(90deg, #000000,
        #744814 50%, #000000);

and leaving all the others at 0.
and I also changed the angle accordingly for the Page background gradient:

background-image: linear-gradient(90deg, #000000, #2C2C2C 650px);

This makes things look correct in Firefox 16. And since I only changed the last background-image: setting it hasn't seemed to effect other browsers like Chrome or Safari. And since IE9 doesn't do gradients...well, who cares about IE9 anyway. I haven't looked at it in any other browsers yet so I may have messed things up a bit elsewhere.

This code can be found in the resources/css/core-elements-body.css file of an exported gallery (or Pages). Look for the Page Settings section for body for the page background gradients and look for the Navigation section for the .menu-container settings.
The gradient angle setting can be changed there, but it would have to be changed in every exported gallery, autoindex, stage, or other page you might have. The easiest thing to do is to implement these changes with a custom css file using phplugins.

If anyone needs to implement these changes but is intimidated by the code, simply copy and paste the relevant code from the exported css file into a custom.css file to be used by phplugins (see above link to the tutorial). Then just make the change from 0 to 90 where needed.

Matthew · 2012-10-19 02:37:41

I've already had a look, and it's a pretty simple fix from my end. Can be done by applying simple math to the value returned from the gradient sliders in Lightroom. The hard part for me is just going to be tracking down all of the gradient controls in each of the plugins and updating accordingly.

The trick is to leave prefixed -border-radius properties as they are, and they will continue to be used by older browser versions not supporting the unprefixed border-radius property.

The larger problem is going to be for users who will need to make this change to their existing pages and galleries, already published to the web. Easier for those already using PHPlugins, who can just put override statements into a custom stylesheet. Not as easy for anyone running pages published in the traditional way ...

For anyone curious, here's the code for the background gradient on the Chado site, http://chado.theturninggate.net:

    background-image: -webkit-linear-gradient(270deg, #DEE877, #FFFFFF 65%);
    background-image: -moz-linear-gradient(270deg, #DEE877, #FFFFFF 65%);
    background-image: -o-linear-gradient(270deg, #DEE877, #FFFFFF 65%);
    background-image: -ms-linear-gradient(270deg, #DEE877, #FFFFFF 65%);
    background-image: linear-gradient(180deg, #DEE877, #FFFFFF 65%);

Note the values of 270deg for all prefixed properties, and 180deg for the final border-radius property. This is a vertical, top-to-bottom gradient.

For what it's worth, these updates are already applied to all child themes where relevant in the Chado 1.1.1 update. Updates to TTG plugins are more complicated and will take a bit longer.

Community @ The Turning Gate

#1 2012-10-13 03:47:30

Firefox 16.0.1 is messin' with the css!

#2 2012-10-13 09:46:37

Re: Firefox 16.0.1 is messin' with the css!

#3 2012-10-19 01:30:21

Re: Firefox 16.0.1 is messin' with the css!

#4 2012-10-19 02:37:41

Re: Firefox 16.0.1 is messin' with the css!

Board footer