A link's hover state is very similar to cardboard boxes. The
fun things you
can do with them are endless. One fun thing that you will
learn about in this article is how to have a background
color slide into view when you are hovering over a link.
Notice the thin black line appearing to the right of George Costanza, for example. That is the result of our black background not fully having disappeared from view. This is caused by how Chrome processes gradient stops, and there is a that hasn’t been fixed in quite some time. Latest attempted fix: https://bugs.chromium.org/p/chromium/issues/detail?id=233879
I’ll file a bug on this at some point in the near future if I can repro it on another machine as well.
Good catch, @nosplashurinal ! The background-repeat is important because when we are adjusting the background-position, we are moving in a direction the original background wouldn’t appear on unless the background repeated. I’ll go back and make an update on that shortly.
I am using Chrome on a Windows 10 Pro machine and I see that effect for the first one, nothing on the second and third and just a hint of it on the last one, if that is any help to you. The three screen shots below show what I am seeing.
Is this happening on the examples in the tutorial as well? Or is it just in your local version? If it is your local version, can you share your HTML file?
This was what I saw while viewing your tutorial from you site in the latest version of Chrome on a Windows Pro machine. I had not saved a version to my machine.
BTW, I do not see this effect in the latest editions of Firefox or Firefox Developer edition but I do see in the latest version of the Opera browser (which is not surprising)
That is strange, for I tried on a Windows machine and I am unable to repro this problem:
I wonder if there is a bug in the underlying Chromium components that kicks in on some hardware but not others. I’ll keep fiddling with this in the meantime