2020-06-30, 05:25 AM
(This post was last modified: 2020-06-30, 05:26 AM by WallBB. Edited 1 time in total.)
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 -
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
Another one
Fix - Here are the fixed classes which I have tested with MyBB default theme
Regards
WallBB
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
- MyBB