CSS transition on element with data-*

[AdmiralAnimE]

I have this:

Code: Select all

<a href="" data-title="Add to list"><i class="fa fa-plus"></i></a>

With transition color on hover applied on the link. But it doesn't transition, just changes color immediately. If I remove the data-title attribute, it works. Tested also in latest versions of FF, IE and Chrome, works there. Can you fix/implement this? Is it a bug or missing feature? Can I provide any helpful details?

edit: I'm using the data-* to make tooltips.

[Moonchild]

Please add the css being in use as well, so I know exactly which behavior you're asking about.

[AdmiralAnimE]

Code: Select all

.button{
	display:inline-block;
	text-transform: uppercase;
	text-align:center;
	color: black;
	padding:0.35em 1.2em;
	letter-spacing:1px;
	background-color: gray;
	font-size:10px;
	border: 1px solid orange;
	border-radius:2px;
	transition: color 0.3s linear;
}

.button i{
		font-size: 15px;
		vertical-align: middle;
		margin-right: 0.6em;
		 transition: color 0.3s linear;
}

.button:hover, .button:hover >i{
		color: blue;
}

Something like this, the <i> contains font icon, but any text in the <a> works. <a> should have the .button class.

[Moonchild]

I'm sorry but this still makes no sense.
Can you please specify exactly which combination of elements and css you're trying to use?

Keep in mind that css transitions need 2 known states to work with, as well. e.g. if you want to transition the color of an element, you should specify both the default color and the :hover color in css.

[AdmiralAnimE]

Sorry, I'm using SASS and and inheriting the .button class on a few other classes. In one place I have <a><i>Icon</i>Text</a>, and somewhere else <a data-title=""><i>Icon</i></a>. In the .button class I've set color (black) for the text (and icon, because it's still considered text) and the transition: color 0.3s linear, also set .button:hover to another color (blue). So in the first place without data-title the transition is working, but where I have data-title - it's not working.

[Moonchild]

I'm unfamiliar with SASS, so you'll just have to create a testcase where I can see it in action. I'm having trouble piecing together what exactly is being done in your code, what is defined on which elements, what the hierarchy is, and how it's pieced together. One thing that stands out is that .button i{} doesn't define a color, and implicit inheritance might not apply in some cases, specifically when you have no surrounding element content (text in the other case).

[AdmiralAnimE]

.button i{} doesn't define a color, because I have more classes specific to every icon with different color. Even if I define a color, still doesn't work. Here's the example: http://jsfiddle.net/p56g0yqz/ The first link has data-* attribute and the transition on the icon doesn't work. If you add color:gold to .button i{} - again, it doesn't work.

[Moonchild]

Thank you! I'll investigate.

[Moonchild]

OK, seems like a reframing issue. It fails on the data-title one, not because of data-title itself, but because the tooltip-styled content has its position: attribute changed at the same time as the CSS transition is about to occur.

There is a solution for this but it's a little involved, so not something i can do right now. I'll put it on the to-do list.
Of note: this hasn't worked since at least Firefox 4 beta, and has apparently only been fixed very recently (Firefox 34).

[Moonchild]

I've looked at this issue some more since the solution has turned out to be a lot more involved and not something I can give priority, and I don't really understand why you're trying to do it this way to begin with. Why don't you just create a hidden element, absolutely positioned on a relatively positioned .button element for the tooltip, and simply show it on :hover?

You should be able to do just something like this for the tooltip:

Code: Select all

<a class="button" href="" ><span class="tooltip">Add to list</span><i class="fa fa-plus"></i>Text</a>

And have the following tooltip class:

Code: Select all

.tooltip{
  display: block;
  padding: 0.3em 1em;
  left: 0;
  top: 120%;
  position:absolute;
  white-space: nowrap;
  z-index: 20;
  color: $color;
  text-transform: none;
  font-size: 12px;
  border-radius: 2px;
  background: gray;
}

and making sure to add:

Code: Select all

position: relative;

to the .button class.

[AdmiralAnimE]

Yea, that might be an alternative, I will see if it'll work how I want it to. I think I avoided something like this because of the extra tag.

Also I don't want to open a new thread and need to ask: The font is rendering somewhat bolder and blurrier in PM compared to FF, it makes is slightly harder to read. This example is with Noto Sans (google font) https://imgur.com/SRt3rgj,sBckBbg (first image is FF).

[Moonchild]

Yea, that might be an alternative, I will see if it'll work how I want it to. I think I avoided something like this because of the extra tag.

It was just off the top of my head, really. I think there are several other ways you can do this Just try to avoid doing a position change on the same element at the same time that you want a transition to occur (since it triggers a reflow and repaint, even if not visibly, which interrupts the start of the transition).

Also I don't want to open a new thread and need to ask: The font is rendering somewhat bolder and blurrier in PM compared to FF, it makes is slightly harder to read. This example is with Noto Sans (google font) https://imgur.com/SRt3rgj,sBckBbg (first image is FF).

To me the second one (PM) actually looks clearer and easier to read than the first. It's not "blurrier" just has a slight bit more cleartype weight to it. If you want to adjust the way Pale Moon renders cleartype text, then please try to fine-tune it with the cleartype parameters in Pale Moon Commander.