1183994 - Gradients missing on page-backgrounds & calendar-events in Zimbra, if -moz-linear-gradient support is dropped

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect, P3)

Description

[ste]

Attachment: nightly_vs_palemoon.jpg

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:42.0) Gecko/20100101 Firefox/42.0
Build ID: 20150714030206

Steps to reproduce:

The Zimbra web client (Ajax-based) does not render correctly since Nightly 42 (2015-07-13). See attached screenshots (Nightly vs Palemoon).


Actual results:

See attached screenshots (right)


Expected results:

See attached screenshots (left)

Comment 1

[Alice0775 White]

Probably, due to Bug 1176496
Nightly42.0a1 does not support for -moz-prefixed gradients (-moz-linear-gradient, -moz-radial-gradient) anymore.
 
You should use linear-gradient, radial-gradient instead of -moz-linear-gradient, -moz-radial-gradient in css.

Comment 2

[Daniel Holbert [:dholbert]]

(Unless the reporter is a developer who works on Zimbra, I don't think he/she can act on comment 1's needinfo; clearing needinfo.)

Something like this bug can also be seen at
 http://demo.zimbra.com/

In Firefox 39, there's a gradient on that page's background (darker at the bottom). In Firefox 42, it's a single solid color. The gradient comes from this stylesheet:
http://demo.zimbra.com/css/common,login,zhtml,skin.css?skin=harmony&v=140828194227
which has 3 instances of prefixed gradients:
 background-image:-moz-linear-gradient(top,#dcf9fe,#9ff0ff)
 background-image:-moz-linear-gradient(top,#9ff0ff,#dcf9fe)
 background-image:-moz-linear-gradient(top,#fff,#ededed)

(There are no alternate-prefix versions of these gradients used here, either, so CSS Unprefixing Service (for webkit gradients) wouldn't have helped us.)

Comment 3

[ste]

Thank you Daniel! I'm just a regular user of Zimbra and thought it helps if you guys get some feedback before these changes get integrated in a regular release...

Best, Steffen

(In reply to Daniel Holbert [:dholbert] from comment #2)
> (Unless the reporter is a developer who works on Zimbra, I don't think
> he/she can act on comment 1's needinfo; clearing needinfo.)
> 
> Something like this bug can also be seen at
>  http://demo.zimbra.com/
> 
> In Firefox 39, there's a gradient on that page's background (darker at the
> bottom). In Firefox 42, it's a single solid color. The gradient comes from
> this stylesheet:
> http://demo.zimbra.com/css/common,login,zhtml,skin.
> css?skin=harmony&v=140828194227
> which has 3 instances of prefixed gradients:
>  background-image:-moz-linear-gradient(top,#dcf9fe,#9ff0ff)
>  background-image:-moz-linear-gradient(top,#9ff0ff,#dcf9fe)
>  background-image:-moz-linear-gradient(top,#fff,#ededed)
> 
> (There are no alternate-prefix versions of these gradients used here,
> either, so CSS Unprefixing Service (for webkit gradients) wouldn't have
> helped us.)

Comment 4

[Mike Taylor [:miketaylr]]

ste, do you still have access to Zimbra? The demo page seems to be gone now.

Comment 5

[ste]

Hi Mike, sure. Using it +/- daily on nightly. How may I help you?

Comment 6

[Mike Taylor [:miketaylr]]

If you set layout.css.prefixes.gradients to false (in about:config), does the calendar not have gradients anymore, similar to your screenshot @ https://bug1183994.bmoattachments.org/attachment.cgi?id=8633938?


Thanks!

Comment 7

[ste]

Tested on 60.0a1 (2018-02-25) (64-bit): no, the gradients are still there with layout.css.prefixes.gradients set to false.

Comment 8

[Mike Taylor [:miketaylr]]

Thanks for testing again ste. It sounds like they've fixed this bug (unless I'm totally confused, and hey, that's always possible). So let's go ahead and close here.

Comment 9

[ste]

I'm sorry but here we are again - 65.0a1 (2018-12-02) (64-bit), no more gradients.

Comment 10

[ste]

Attachment: nightly.JPG

Rendering of Zimbra Calendar with Nightly 65.0a1 (2018-12-02) (64-bit)

Comment 11

[ste]

Attachment: vivaldi.JPG

...same calendar with Vivaldi (this is how it should look).

Comment 12

[Daniel Holbert [:dholbert]]

Well, darn. That'll be from bug 1337655. Thanks for the heads up.

Any chance you can use Firefox devtools (right-click, inspect element) to find the .css file that has the gradients in question? It'd be useful to see what that source looks like.

Comment 13

[ste]

Attachment: images,common,dwt,msgview,login,zm,spellcheck,skin.css

Here you are, but I think the gradient is here:

<td style="background:-moz-linear-gradient(top,#FFFFFF, #4AA6F1);" rowspan="2" width="4">
</td>
<td class="appt_time">
<table role="presentation" style="background: none repeat scroll 0 0 transparent;border:0;border-collapse:collapse;border-spacing:0;width:100%">
<tbody>
<tr>
<td id="zli__CLWW__373714_DWT143_st" style="padding-right:3px;white-space:nowrap;">8:00</td>
<td style="padding-right:3px;">
<div class="ImgReadOnly" style="width:16"></div></td><td style="width:100%"></td>
</tr>
</tbody>
</table>
</td>

Comment 14

[Daniel Holbert [:dholbert]]

Thanks, steffen.

I've downloaded a copy of zimbra "open source edition" from https://www.zimbra.com/downloads/zimbra-collaboration-open-source/ (which requires that you give them your contact info), and I've extracted the results and I'm taking a look locally.

I found one file with a problematic-looking pattern, "Dwt.js":
============
/**
 * -- FF 3.6+
 *    background: -moz-linear-gradient(black, white);
 * -- Safari 4+, Chrome 2+
 *    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));
 * -- Safari 5.1+, Chrome 10+
 *    background: -webkit-linear-gradient(top, black, white);
 * -- Opera 11.10
 *    background: -o-linear-gradient(black, white);
 * -- IE6 & IE7
 *    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');
 * -- IE10
 *    background: -ms-linear-gradient(black, white);
 * -- the standard
 *    background: linear-gradient(black, white);
 */
Dwt.createLinearGradientInfo =
function(startColor, endColor, direction) {
    var cssDirection;
    var gradient = {};
        if (AjxEnv.isIE9) {
        var params = {
            x1: "0%",
            x2: direction == 'v' ? "0%" : "100%",
            y1: "0%",
            y2: direction == 'v' ? "100%" : "0%",
            startColor: startColor,
            endColor: endColor
        };
        var svgsrc =
            AjxTemplate.expand('dwt.Widgets#SVGGradient', params);
        gradient.field = "background";
        gradient.css   = ('url(data:image/svg+xml,' +
                          escape(svgsrc.replace(/\s+/g, ' ')) + ')');
    } else if (AjxEnv.isFirefox3_6up) {
        cssDirection = (direction == 'v') ? 'top' : 'left';
        gradient.field = "background";
        gradient.css   = "-moz-linear-gradient(" + cssDirection + "," + startColor + ", "  + endColor + ")";
    } else if ((AjxEnv.isSafari && AjxEnv.isSafari5_1up) || AjxEnv.isChrome10up) {
        cssDirection = (direction == 'v') ? 'top' : 'left';
        gradient.field = "background";
        gradient.css   = "-webkit-linear-gradient(" + cssDirection + ","+
                          startColor + ", " + endColor + ")";
    } else if ((AjxEnv.isSafari && AjxEnv.isSafari4up) || AjxEnv.isChrome2up) {
        var startPt = 'left top';
        var endPt   = (direction == 'v') ? "left bottom" : "right top";
        gradient.field = "background";
        gradient.css   = "-webkit-gradient(linear, " + startPt + ", " + endPt +
                         ", color-stop(0%, " + startColor + "), color-stop(100%, " + endColor + "))";
    } else {
        cssDirection = (direction == 'v') ? 'to bottom' : 'to right';
        gradient.field = "background";
        gradient.css   = "linear-gradient(" + cssDirection + "," + startColor + ", "  + endColor + ")";
    }
    return gradient;
}
============

It looks like right now, they only use the standard syntax as a last resort, and they prefer to use a prefixed version if they can.  They are matching the "AjxEnv.isFirefox3_6up" condition and giving us a moz-prefixed gradient.

I think we could recommend that they drop that clause entirely -- we've supported the standard syntax since Firefox 16 (bug 752187) in 2012, and Firefox versions that old haven't been supported in years, so Zimbra should have zero users running a browser that only understands the "-moz" prefixed syntax.

Comment 15

[Daniel Holbert [:dholbert]]

I think every instance of the problem is in a copy of that ^^ JS source code (for the function "Dwt.createLinearGradientInfo" which is duplicated several times in various JS files in the packaged Zimbra installation -- it's e.g. in NewWindow_1_all.js, Startup1_1_all.js, Ajax_all.js, Boot_all.js, and then in Dwt.js which seems to be the "master" copy perhaps).

Anyway -- I've reached out to a developer at Zimbra (with help from a sales associate who emailed me about my Zimbra download) and I've pointed them at comment 14. Hopefully I hear back from them soon & we can see how quickly we can move forward here.

Comment 16

[Ciprian Ciocan [:ciprian]]

Karl, is there a way to test if the issue still reproduces since we do not have an available test account?

Comment 17

[Karl Dubost💡 :karlcow]

Needs Triage.

Comment 18

[Raul Bucata]

We appreciate your report. I was not able to reproduce the issue. The gradient is shown when creating a calendar event for a certain hour

Firefox Nightly: https://prnt.sc/1epxby2

Vivaldi: https://prnt.sc/1epw2hy

Tested with:

Browser / Version: Firefox Nightly 92.0a1 (2021-07-22) (64-bit)/Vivaldi 4.0.2312.41 (Stable channel) (64-bit)
Operating System: Windows 10 PRO x64

Suggestion: Is the issue reproducible on your side on the latest build of Firefox Nightly? If so, try clearing cache/data/cookies, disable addons and Ad-blocker (if available), or use a clean profile, and check again? If there are any changes made to the default settings of the browser (e.g. in about: config) please revert to the default settings and try again. Also, have the required cookies been accepted for this page?

Notes:
Demo version is not available, but account info did not arrived via email

Comment 19

[Raul Bucata]

Unfortunately being unable to reproduce the issue you are experiencing, we cannot help you with it. Please leave a comment with more details regarding the steps to reproduce, or file a new report and we will gladly investigate this further. Closing this as WORKSFORME for now

Comment 20

[Daniel Holbert [:dholbert]]

Yeah, this shouldn't be reproducible since we reverted the change that caused it (bug 1337655).

Whether or not Zimbra updated things on their end to stop depending on moz-prefixed gradients, I think we've decided/realized that we're stuck supporting them indefinitely due to sites like this, so we don't need to worry about this bug at this point.