#chrome links with transition color issue

[luiscarlosjayk]

I'm passing an application to Angularjs, it is using Twitter Bootstrap.
And something strange is happening on Chrome.

I override links with next rule to make transition color and background:

a, a:visited, a:focus, a:hover, a:visited {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    text-decoration: none;
}

Now, there are some links that not taking initial color (white) that they should have, instead they're getting transparent.

This is fixed if:
1- I open or close the console (really strange)
2- After first hover over the links.
3- I modify the styles of anything else using the console

Also, this happens only in Google Chrome, not happening in FireFox, neither on IE.
And this happens only on the Angularjs version of the app.

If I remove the transitions styles they work as expected (having color white on initial state and not transparent).

http://screencast.com/t/ThnqK1kAdX
(left window is Chrome, right window is FireFox)

Any idea?

[petebacondarwin]

What version of AngularJS? Can you show the code in your app? Are the
links generated dynamically by angular?

On 8 July 2013 22:38, Luis Carlos Osorio Jayk [email protected]:

I'm passing an application to Angularjs, it is using Twitter Bootstrap.
And something strange is happening on Chrome.

I override links with next rule to make transition color and background:
a, a:visited, a:focus, a:hover, a:visited {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
text-decoration: none;
}

Now, there are some links that not taking initial color (white) that they
should have, instead they're getting transparent.

This is fixed if:
1- I open or close the console (really strange)
2- After first hover over the links.
3- I modify the styles of anything else using the console

Also, this happens only in Google Chrome, not happening in FireFox,
neither on IE.
And this happens only on the Angularjs version of the app.

If I remove the transitions styles they work as expected (having color
white on initial state and not transparent).

http://screencast.com/t/ThnqK1kAdX
(left window is Chrome, right window is FireFox)

Any idea?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/3164
.

[luiscarlosjayk]

Hi Pete,
I'm running AngularJS version 1.0.7.

The links are in a template file:

[...more html before...]
<p>
  <a data-ng-href="#/signup" class="btn btn-warning btn-large flat">
     Join the Party!
  </a>
  <a data-ng-href="#/live" class="btn btn-info btn-large flat">
    Try it live!
  </a>
</p>
[...more html after...]

So although the template file is loaded dinamically using routeProvider and loading it in an ng-view directive, links are statically generated.

Sorry, but the app is not live yet, cannot take you to a link to view the issue at the moment.

One thing that might or might not be helpful is that CSS are brought inline in the template file through a

<link rel="stylesheet" type="text/css" href="stylesheet_for_this_template" />

Thanks for your help, if you have any idea please tell me since that is not playing nice with my buttons ;)

[petebacondarwin]

If you move the stylesheet link out into the body of the app does it work now?
I suspect that this is the issue.

[luiscarlosjayk]

Hi Pete,

I have moved it to the head just for testing and no, it doesn't remove the issue. And in fact is very very strange that if I open or close the console (if it was already opened when loaded) then it fixes. Or if I modify style rules on the console of any element (no matter which one).

Take into account that this is happening only on Google Chrome, not happening on FireFox neither on IE.

[luiscarlosjayk]

Another test failure too.

I've had added in the head.

<link rel="stylesheet" type="text/css" data-ng-href="/my_base_path/css/{{stylesheet}}.css" data-ng-repeat="stylesheet in stylesheets" />

and then in the controller that is used on that path using the routeProvider, added the stylesheet to the scope

$scope.stylesheets = ['this_template_stylesheet'];

And yes, stylesheet is loaded but problem persists on Chrome.

[petebacondarwin]

Looks like chrome is not triggering a repaint when the animation completes.

Pete
...from my mobile.
On 9 Jul 2013 15:23, "Luis Carlos Osorio Jayk" [email protected]
wrote:

Hi Pete,

I have moved it to the head just for testing and no, it doesn't remove the
issue. And in fact is very very strange that if I open or close the console
(if it was already opened when loaded) then it fixes. Or if I modify style
rules on the console of any element (no matter which one).

Take into account that this is happening only on Google Chrome, not
happening on FireFox neither on IE.

—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/3164#issuecomment-20677170
.

[luiscarlosjayk]

I wanted to add that the styles overriding the styles are already in the head in the app.css which carries general app styles and overrides.

So the styles for this aren't being loaded dinamically anyway.

It also fixes if instead of transitioning all I change styles to background only, but then I cannot transition on color when needed:

a, a:visited, a:focus, a:hover, a:visited {
    -webkit-transition: background 0.5s ease-in-out;
    -moz-transition: background 0.5s ease-in-out;
    -ms-transition: background 0.5s ease-in-out;
    -o-transition: background 0.5s ease-in-out;
    transition: background 0.5s ease-in-out;
    text-decoration: none;
}

[inkstak]

Hi, I'm facing the same problem. ( Chrome v35 - Angular v1.2.17 )
The problem happens when using a distant template.
Btw, the color issue concerns only visited links, even after trying to force color on visited links.

A part of my javascript:

app.config(function($routeProvider) {
  $routeProvider.when('/items', {
    templateUrl: '/template.html',
    controller:  'ItemsCtrl'
  })
})

Case 1 - with color bug

/index.html

<ng-view></ng-view>

/template.html

<a ng-repeat="item in items">{{ item.name }}</a>

Case 2 - no color bug

/index.html

<ng-view></ng-view>
<script type="text/ng-template" id="/template.html">
  <a ng-repeat="item in items">{{ item.name }}</a>
</script>

As a workaround, I'll use inline templates instead of distant ones.

[mattnish]

+1

Getting same chrome (41.0.2272.101) rendering bug with v1.3.15. Hovering, changing the window size, or triggering a redraw with a delayed css3 animation (terrible hack) seems to fix it.

[GSchutz]

+1

I have the same problem with anchor tag,
Angular v1.3.9, Angular-ui-router v0.2.13, Chrome v39.0.2171.99

But I found a solution (at least for me it worked), the ui-router use the attribute ui-sref, I just add the href attribute back, when I remove the href the problem comes back again.

[mattnish]

Hmm that's funky. It seems that when I use just ng-href on anchor tags, there are the color rendering issues in Chrome.

But when I use a blank href="#" with ng-hrefit's all good. (Or just href, but that's against the 'Angular way')

[petebacondarwin]

@mattnish - I wonder if you have different CSS styles for <a> tags that have no href? The CSS might then be rendered based on the lack of href when the HTML is initially rendered and Chrome is not then re-rendering when the ng-href directive adds in the href attribute later.

[mattnish]

@petebacondarwin I'm simply using bootstrap and an override class. So, there are no classes that are different for anchors with/without href, just the out-of-the-box bootstrap anchor style, then my override that looks like this:

a  {
  color: $grey-8;
  &:focus, &:visited {
    color: $grey-8;
  }
}

[sricks]

I have this same issue, there are definitely no styles that reference an a tag with/without an href. Adding href="#" fixed it for me.

edit: using version angular 1.3.0-rc.0

[waltercolindres]

same issue popped up for me on angular 1.3.15

[Narretz]

Is this still a problem for anyone here with newer Angular / Chrome versions? If so, can someone provide a runnable demo?

[Narretz]

I'm going to close this issue because we have no reproduction of the issue. Feel free to reopen this issue if you can provide a reproduction (ideally a runnable demo in a Plunker or similar. You can use this Plunker Template).

[leandroluk]

I fixing this crazy bug on stop to use <a href> tag for navigation and start using a <button> or another tag for this...