Why the sprite is not completely working?

The situation is this: is there a site that has a sprite with buttons and icons, is CSS that works with sprites.
The buttons have 2 States: the mouse is, mouse is not.
So, somehow, in 50% of cases, normal state (no mouse) button is not displayed, as if the sprite is not. It would seem that this may be due to the fact that the sprite does not have time to upload by the time of rendering the page, but no. After the update button did not appear, although when you hover works. And the hover state in the sprite is below (images are loaded from the top down...).
Another point. If chrome dev tools debajit css code, and move the position of the sprite on a pixel back and forth, it appears. Again, after refreshing the page disappears.
After cleaning the cache as luck, or something!.
Here is a piece of CSS
.message .button{
width:240px;
padding:9px 15px 0;
height:30px;
font-size:18px;
background:url(sprites/buttons-sprite.png) -9px -9px no-repeat;
display:block;
cursor:pointer;
text-decoration:none;
margin:15px auto 0
}
.message .button:hover{
background:url(sprites/buttons-sprite.png) -9px -47px no-repeat
}
September 26th 19 at 06:14
2 answers
September 26th 19 at 06:16
You have answered your own question in the video fix on the value that You change in the devtools.
There is a difference of 1 pixel, and the return to original state everything is OK - Al commented on September 26th 19 at 06:19
then maybe the problem is in display none block message ? Because button child element to it. - braeden.Daugherty commented on September 26th 19 at 06:22
:hover works
tried to put in css for .message display:block, and after loading the page to remove it. The same - Al commented on September 26th 19 at 06:25
js involved with this element as it is? - braeden.Daugherty commented on September 26th 19 at 06:28
when the event does .message display:block, and depending on the type of event changes a text message and buttons - Al commented on September 26th 19 at 06:31
Then I will be able to help You only seeing it in person. - braeden.Daugherty commented on September 26th 19 at 06:34
September 26th 19 at 06:18
I would do this:
First to the hover I would just change the position of the background, that is
.message .button:hover{
background-position: -9px -47px;
}

You already pointed out the picture a second time to do this makes no sense.

To understand what trouble exactly with the picture, and not with the visibility of the unit, replace the picture with the flowers. That is originally let's say just a red background, and no pointer on hover green. If everything is OK to catch on.
The problem is not with the visibility of the block TC the text it is visible under any condition, the rest I will try as I'll be home - Al commented on September 26th 19 at 06:21
The text - not an indicator. Perhaps, if you will register overflow: hidden, you will not see text as it may be that the height of the block 0px... - braeden.Daugherty commented on September 26th 19 at 06:24
Height is also explicitly specified - Al commented on September 26th 19 at 06:27
Can't it just not work!)) Throw off the layout in the mail, she's in profile, I'm home, I will look, tell me =))) - braeden.Daugherty commented on September 26th 19 at 06:30
I'll be home, will post) - Al commented on September 26th 19 at 06:33
No, see, it's not always!)for example I have this intentionally to catch didn't work. Suddenly, as it always comes out) I still suspect the download speed and so on, any thoughts in that direction? I also tried to connect the css in the head and at the bottom of the body, but in vain - braeden.Daugherty commented on September 26th 19 at 06:36
A link to the project and all questions will disappear ) - Al commented on September 26th 19 at 06:39
vk.com/app3833431 - Brain.MacGyver commented on September 26th 19 at 06:42
I normally work hover - Al commented on September 26th 19 at 06:45
"After the upgrade button did not appear, although when you hover works. "
as it should be) is necessary to catch the disabled normal state of the button - Brain.MacGyver commented on September 26th 19 at 06:48

Find more questions by tags CSS