Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
jGrowl uses a non-standard property zoom which should be replaced
#1
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
Reply
#2
Thanks for reporting. It will be checked by the Developers.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)