[Pushed] jGrowl uses a non-standard property zoom which should be replaced

[WallBB]

Issue - jGrowl uses a non-standard property zoom which should be replaced with transform Scale or calc CSS property.

Browser - Firefox

You can also see the warning in Mozilla browser console.

Warning - 

This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”.

You can check MDN and a Stackoverflow response

Sites Affected - All MyBB site that users jGrowl

I have found two instances of zoom in global.css which should be replaced. Below are the two classes in global.css with the code having above issue

.jGrowl-notification {
background-color: transparent;
opacity: 0.9;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
zoom: 1;
width: 250px;
padding: 10px;
margin: 10px;
text-align: left;
display: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
word-break: break-all;
}

Another one

.jGrowl-closer {
background-color: #000000;
opacity: 0.9;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
zoom: 1;
width: 250px;
padding: 10px;
margin: 10px;
text-align: left;
display: none;
border-radius: 5px;
word-break: break-all;
padding-top: 4px;
padding-bottom: 4px;
cursor: pointer;
font-size: .9em;
font-weight: bold;
text-align: center;
}

Fix - Here are the fixed classes which I have tested with MyBB default theme

.jGrowl-notification {
background-color: transparent;
opacity: 0.9;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
transform:scale(1);
transform-origin: 0 0;
width: 250px;
padding: 10px;
margin: 10px;
text-align: left;
display: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
word-break: break-all;
}

.jGrowl-closer {
background-color: #000000;
opacity: 0.9;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
transform:scale(1);
transform-origin: 0 0;
width: 250px;
padding: 10px;
margin: 10px;
text-align: left;
display: none;
border-radius: 5px;
word-break: break-all;
padding-top: 4px;
padding-bottom: 4px;
cursor: pointer;
font-size: .9em;
font-weight: bold;
text-align: center;
}

Regards
WallBB

[.m.]

Thanks for reporting. It will be checked by the Developers.

[Eldenroot]

https://github.com/mybb/mybb/pull/4124

[Ben]

Hi,

Thank you for your report. We have pushed this issue to our Github repository for further analysis where you can track our commits and progress with fixing this bug. Discussions regarding this bug may also take place there too.

Follow this link to visit the issue on Github: https://github.com/mybb/mybb/issues/4125

Thanks for contributing to MyBB!

Regards,
The MyBB Group