Can anyone explain why these bullets will change color correctly in Firefox and IE, but not in Chrome (my current version is 47.0.2526.106)? Why do the bullets in the first ul stay white, but the others change initially?
Note that I get the same behavior whether I bind to class or use the ng-class attribute.
Is there any way to get the colors to update correctly?
Firefox/IE:
Chrome:
angular.module('myApp', [])
.controller('myCtrl', [
'$scope',
'$interval',
function($scope, $interval) {
var values = ['Hello', 'Oops', 'Uh-Oh...'];
var classes = ['good', 'warning', 'danger'];
var nItems = 8;
$scope.items = [];
for (var i = 0; i < nItems; i++) {
$scope.items.push({});
}
function updateItems() {
for (var i = 0; i < $scope.items.length; i++) {
var item = $scope.items[i];
var chosen = Math.floor(Math.random() * values.length);
item.value = values[chosen];
item.class = classes[chosen];
}
}
$interval(updateItems, 3000);
}
]);body {
background: #333;
color: white;
}
ul {
display: inline-block;
}
.good {
color: limegreen;
}
.warning {
color: yellow;
}
.danger {
color: red;
}<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="[email protected]" data-semver="1.4.8" src=".4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li ng-class="{'good': item.class==='good', 'warning': item.class==='warning', 'danger': item.class==='danger'}" ng-repeat="item in items">{{item.value}}</li>
</ul>
</body>
</html>Can anyone explain why these bullets will change color correctly in Firefox and IE, but not in Chrome (my current version is 47.0.2526.106)? Why do the bullets in the first ul stay white, but the others change initially?
Note that I get the same behavior whether I bind to class or use the ng-class attribute.
Is there any way to get the colors to update correctly?
Firefox/IE:
Chrome:
angular.module('myApp', [])
.controller('myCtrl', [
'$scope',
'$interval',
function($scope, $interval) {
var values = ['Hello', 'Oops', 'Uh-Oh...'];
var classes = ['good', 'warning', 'danger'];
var nItems = 8;
$scope.items = [];
for (var i = 0; i < nItems; i++) {
$scope.items.push({});
}
function updateItems() {
for (var i = 0; i < $scope.items.length; i++) {
var item = $scope.items[i];
var chosen = Math.floor(Math.random() * values.length);
item.value = values[chosen];
item.class = classes[chosen];
}
}
$interval(updateItems, 3000);
}
]);body {
background: #333;
color: white;
}
ul {
display: inline-block;
}
.good {
color: limegreen;
}
.warning {
color: yellow;
}
.danger {
color: red;
}<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li ng-class="{'good': item.class==='good', 'warning': item.class==='warning', 'danger': item.class==='danger'}" ng-repeat="item in items">{{item.value}}</li>
</ul>
</body>
</html>Update
Coming back to this about a year later it appears Google has fixed the rendering bug that caused this, although I'm not sure exactly which release included the fix. I no longer see this issue on Chrome v56.0.2924.87.
Share Improve this question edited Feb 21, 2017 at 0:04 NanoWizard asked Dec 28, 2015 at 22:11 NanoWizardNanoWizard 2,1641 gold badge24 silver badges35 bronze badges 2- 1 Triggering a repaint event seems to resolve the issue for me in Chrome... although that is a hack-ish solution. I'm not aware of any other workarounds since this is definitely a rendering issue. – Josh Crozier Commented Dec 28, 2015 at 22:24
- Clearly the root cause is the $interval statement. Calling it with $timeout and at the end of the updateItems calling it again with another $timeout produces the same interval effect, but get the correct display. Not sure why. I'd love to hear the technicals behind this. – Will Commented Dec 28, 2015 at 22:33
2 Answers
Reset to default 6This is a Chrome rendering bug.
One option is to insert custom bullet points using a pseudo element.
ul {
display: inline-block;
list-style: none;
}
ul li:before {
content: '\2022';
text-indent: -1em;
display: inline-block;
}
Here is the updated example:
angular.module('myApp', [])
.controller('myCtrl', [
'$scope',
'$interval',
function($scope, $interval) {
var values = ['Hello', 'Oops', 'Uh-Oh...'];
var classes = ['good', 'warning', 'danger'];
var nItems = 8;
$scope.items = [];
for (var i = 0; i < nItems; i++) {
$scope.items.push({});
}
function updateItems() {
for (var i = 0; i < $scope.items.length; i++) {
var item = $scope.items[i];
var chosen = Math.floor(Math.random() * values.length);
item.value = values[chosen];
item.class = classes[chosen];
}
}
$scope.getItemValue = function(item) {
return item.value;
};
$interval(updateItems, 3000);
}
]);body {
background: #333;
color: white;
}
ul {
display: inline-block;
list-style: none;
}
ul li:before {
content: '\2022';
text-indent: -1em;
display: inline-block;
}
.good {
color: limegreen;
}
.warning {
color: yellow;
}
.danger {
color: red;
}<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li ng-class="{'good': item.class==='good', 'warning': item.class==='warning', 'danger': item.class==='danger'}" ng-repeat="item in items">{{item.value}}</li>
</ul>
</body>
</html>Another option is to trigger a repaint event in order to force the browser to update the styling. This is definitely a hackish option, but nonetheless, it works:
function forceRepaint() {
document.body.style.display = 'none';
document.body.offsetHeight;
document.body.style.display = '';
}
Here is the other updated example:
angular.module('myApp', [])
.controller('myCtrl', [
'$scope',
'$interval',
function($scope, $interval) {
var values = ['Hello', 'Oops', 'Uh-Oh...'];
var classes = ['good', 'warning', 'danger'];
var nItems = 8;
$scope.items = [];
for (var i = 0; i < nItems; i++) {
$scope.items.push({});
}
function updateItems() {
for (var i = 0; i < $scope.items.length; i++) {
var item = $scope.items[i];
var chosen = Math.floor(Math.random() * values.length);
item.value = values[chosen];
item.class = classes[chosen];
forceRepaint();
}
}
$scope.getItemValue = function(item) {
return item.value;
};
$interval(updateItems, 3000);
}
]);
function forceRepaint() {
document.body.style.display = 'none';
document.body.offsetHeight;
document.body.style.display = '';
}body {
background: #333;
color: white;
}
ul {
display: inline-block;
}
.good {
color: limegreen;
}
.warning {
color: yellow;
}
.danger {
color: red;
}<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li ng-class="{'good': item.class==='good', 'warning': item.class==='warning', 'danger': item.class==='danger'}" ng-repeat="item in items">{{item.value}}</li>
</ul>
</body>
</html>A
s a menter said this seems to be rendering bug, but here's a work around by just using :before to color the dots yourself. See the css section (just wanted to keep it runnable)
angular.module('myApp', [])
.controller('myCtrl', [
'$scope',
'$interval',
function($scope, $interval) {
var values = ['Hello', 'Oops', 'Uh-Oh...'];
var classes = ['good', 'warning', 'danger'];
var nItems = 8;
$scope.items = [];
for (var i = 0; i < nItems; i++) {
$scope.items.push({});
}
function updateItems() {
for (var i = 0; i < $scope.items.length; i++) {
var item = $scope.items[i];
var chosen = Math.floor(Math.random() * values.length);
item.value = values[chosen];
item.class = classes[chosen];
}
}
$scope.getItemValue = function(item) {
return item.value;
};
$interval(updateItems, 3000);
}
]);body {
background: #333;
color: white;
}
.good {
color: limegreen;
}
.warning {
color: yellow;
}
.danger {
color: red;
}
/* made the dots yourself */
ul {
display: inline-block;
list-style: none;
padding:0;
margin:0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li.warning:before {
content: "• ";
color: yellow;
}
li.danger:before {
content: "• ";
color: red;
}
li.good:before {
content: "• ";
color: limegreen;
}<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li ng-class="{'good': item.class==='good', 'warning': item.class==='warning', 'danger': item.class==='danger'}" ng-repeat="item in items">{{item.value}}</li>
</ul>
</body>
</html>