Styjun

Robbers: The Hidden OEIS Substring

How might the United Kingdom become a republic?

Why isn't there research to build a standard lunar, or Martian mobility platform?

Do native speakers use ZVE or CPU?

Dropping outliers based on "2.5 times the RMSE"

Why did the Japanese attack the Aleutians at the same time as Midway?

Machine learning and operations research projects

What's a moment that's more impactful on a reread called?

PIC12F675 GP4 doesn't work

How can one write good dialogue in a story without sounding wooden?

Are neural networks prone to catastrophic forgetting?

QGIS Welcome page: What is 'pin to list' for?

Can I play a first turn Simic Growth Chamber to have 3 mana available in the second turn?

Are there any intersection of Theory A and Theory B?

When did the Roman Empire fall according to contemporaries?

Is purchasing foreign currency before going abroad a losing proposition?

Would letting a multiclass character rebuild their character to be single-classed be game-breaking?

During copyediting, journal disagrees about spelling of paper's main topic

What does the standard say about char arrays as template arguments?

As a DM, how to avoid unconscious metagaming when dealing with a high AC character?

Why are Hobbits so fond of mushrooms?

Keep milk (or milk alternative) for a day without a fridge

How to check the quality of an audio sample?

Can I use "candidate" as a verb?

Firefox: First Time Hover Blink

CSS selector for first element with classMake the cursor a hand when a user hovers over a list itemSee :hover state in Chrome Developer ToolsChrome / Safari image loader, first time openingHow to make Twitter Bootstrap menu dropdown on hover rather than clickHow to make blinking/flashing text with CSS 3?Pan a large image inside a div without using mouseoverBubble - content overflowingImage flickers on first hover with transform:scale (in Firefox only)Image preloading techniques (for use as hover state CSS background images) don't seem to work on Chrome

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I'm trying to change the background-image of an element on mouseover, and it works all fine and dandy in Chrome. But in Firefox it always blinks/flickers for a split second on the very first hover after loading the page.

I've already pre-loaded the images that are needed on body:after, and the developer console in Firefox shows that there is a "GET" request for the file in question. Yet it doesn't seem to be ready to get rendered on the first mouseover.

This is how I pre-load the image.

body:after 
 position: absolute;
 width: 0;
 height: 0;
 overflow: hidden;
 z-index: -1;
 content: url(image.png);

I don't understand, why it's working flawlessly in Chrome, but Firefox produces the first-time flicker regardless of pre-loading or not. I do know about image sprites, but in my case, it's not a possibility.

css css3 css-animations

share|improve this question

edited Mar 26 at 13:00

Clyde Lobo

7,95955 gold badges3030 silver badges5353 bronze badges

asked Mar 26 at 4:29

RoyRoy

633 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can u make a demo fiddle
  
  – NIsham Mahsin
  Mar 26 at 4:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  please create a code snippet of your working code. thanks
  
  – Xenio Gracias
  Mar 26 at 4:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don’t know if I could be bothered to pre-render an image either, if you told me upfront the space in which I should do so was 0 x 0 pixels.
  
  – 04FS
  Mar 26 at 8:01
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yeah, you're right 04FS. Modern browsers probably do too many "smart decisions" for a simple pre-loading trick like this. After all this I'm going for an image sprite regardless of my last statement in the original post.
  
  – Roy
  Mar 26 at 18:34
  

  
  
  
  

add a comment | 

1

I'm trying to change the background-image of an element on mouseover, and it works all fine and dandy in Chrome. But in Firefox it always blinks/flickers for a split second on the very first hover after loading the page.

I've already pre-loaded the images that are needed on body:after, and the developer console in Firefox shows that there is a "GET" request for the file in question. Yet it doesn't seem to be ready to get rendered on the first mouseover.

This is how I pre-load the image.

body:after 
 position: absolute;
 width: 0;
 height: 0;
 overflow: hidden;
 z-index: -1;
 content: url(image.png);

I don't understand, why it's working flawlessly in Chrome, but Firefox produces the first-time flicker regardless of pre-loading or not. I do know about image sprites, but in my case, it's not a possibility.

css css3 css-animations

share|improve this question

edited Mar 26 at 13:00

Clyde Lobo

7,95955 gold badges3030 silver badges5353 bronze badges

asked Mar 26 at 4:29

RoyRoy

633 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can u make a demo fiddle
  
  – NIsham Mahsin
  Mar 26 at 4:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  please create a code snippet of your working code. thanks
  
  – Xenio Gracias
  Mar 26 at 4:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don’t know if I could be bothered to pre-render an image either, if you told me upfront the space in which I should do so was 0 x 0 pixels.
  
  – 04FS
  Mar 26 at 8:01
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yeah, you're right 04FS. Modern browsers probably do too many "smart decisions" for a simple pre-loading trick like this. After all this I'm going for an image sprite regardless of my last statement in the original post.
  
  – Roy
  Mar 26 at 18:34
  

  
  
  
  

add a comment | 

I'm trying to change the background-image of an element on mouseover, and it works all fine and dandy in Chrome. But in Firefox it always blinks/flickers for a split second on the very first hover after loading the page.

I've already pre-loaded the images that are needed on body:after, and the developer console in Firefox shows that there is a "GET" request for the file in question. Yet it doesn't seem to be ready to get rendered on the first mouseover.

This is how I pre-load the image.

body:after 
 position: absolute;
 width: 0;
 height: 0;
 overflow: hidden;
 z-index: -1;
 content: url(image.png);

I don't understand, why it's working flawlessly in Chrome, but Firefox produces the first-time flicker regardless of pre-loading or not. I do know about image sprites, but in my case, it's not a possibility.

css css3 css-animations

share|improve this question

edited Mar 26 at 13:00

Clyde Lobo

7,95955 gold badges3030 silver badges5353 bronze badges

asked Mar 26 at 4:29

RoyRoy

633 bronze badges

body:after 
 position: absolute;
 width: 0;
 height: 0;
 overflow: hidden;
 z-index: -1;
 content: url(image.png);

share|improve this question

edited Mar 26 at 13:00

Clyde Lobo

7,95955 gold badges3030 silver badges5353 bronze badges

asked Mar 26 at 4:29

RoyRoy

633 bronze badges

share|improve this question

edited Mar 26 at 13:00

Clyde Lobo

7,95955 gold badges3030 silver badges5353 bronze badges

asked Mar 26 at 4:29

RoyRoy

633 bronze badges

edited Mar 26 at 13:00

Clyde Lobo

7,95955 gold badges3030 silver badges5353 bronze badges

edited Mar 26 at 13:00

Clyde Lobo

7,95955 gold badges3030 silver badges5353 bronze badges

asked Mar 26 at 4:29

RoyRoy

633 bronze badges

asked Mar 26 at 4:29

RoyRoy

633 bronze badges

1 Answer
1

active

oldest

votes

2

Even if it's already loaded from server, if some additional delay is seen then I would instead put both images (stacked or side-by-side) into a single image a.k.a. spritesheet.

Then on hover, shift the background-position to reveal the other half of the image.

For example, if the images are each 50x50, you could make one 100x50 image with both side-by-side. Let the normal state show the left half only (by keeping the element width to 50 and background-position 0 0) and then slide the background 50px left on hover, to reveal the right half:

background-position: -50px 0;

share|improve this answer

answered Mar 26 at 5:14

adamsimadamsim

10644 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Agreed, using the "sliding doors" technique like this would be easier, less code, work everywhere, and less HTTP requests for images
  
  – Chris Barr
  Mar 26 at 13:03
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  The reason I didn't want to use an image sprite is because I was planning for a background transition to be added later. And it looks really weird if you do that with an image sprite. But I've found a way to do it regardless (in this article): gordonlesti.com/css-background-transitions-with-image-sprites
  
  – Roy
  Mar 26 at 18:36
  
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55349873%2ffirefox-first-time-hover-blink%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

Even if it's already loaded from server, if some additional delay is seen then I would instead put both images (stacked or side-by-side) into a single image a.k.a. spritesheet.

Then on hover, shift the background-position to reveal the other half of the image.

For example, if the images are each 50x50, you could make one 100x50 image with both side-by-side. Let the normal state show the left half only (by keeping the element width to 50 and background-position 0 0) and then slide the background 50px left on hover, to reveal the right half:

background-position: -50px 0;

share|improve this answer

answered Mar 26 at 5:14

adamsimadamsim

10644 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Agreed, using the "sliding doors" technique like this would be easier, less code, work everywhere, and less HTTP requests for images
  
  – Chris Barr
  Mar 26 at 13:03
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  The reason I didn't want to use an image sprite is because I was planning for a background transition to be added later. And it looks really weird if you do that with an image sprite. But I've found a way to do it regardless (in this article): gordonlesti.com/css-background-transitions-with-image-sprites
  
  – Roy
  Mar 26 at 18:36
  
  

  
  
  
  

add a comment | 

2

Even if it's already loaded from server, if some additional delay is seen then I would instead put both images (stacked or side-by-side) into a single image a.k.a. spritesheet.

Then on hover, shift the background-position to reveal the other half of the image.

For example, if the images are each 50x50, you could make one 100x50 image with both side-by-side. Let the normal state show the left half only (by keeping the element width to 50 and background-position 0 0) and then slide the background 50px left on hover, to reveal the right half:

background-position: -50px 0;

share|improve this answer

answered Mar 26 at 5:14

adamsimadamsim

10644 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Agreed, using the "sliding doors" technique like this would be easier, less code, work everywhere, and less HTTP requests for images
  
  – Chris Barr
  Mar 26 at 13:03
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  The reason I didn't want to use an image sprite is because I was planning for a background transition to be added later. And it looks really weird if you do that with an image sprite. But I've found a way to do it regardless (in this article): gordonlesti.com/css-background-transitions-with-image-sprites
  
  – Roy
  Mar 26 at 18:36
  
  

  
  
  
  

add a comment | 

Even if it's already loaded from server, if some additional delay is seen then I would instead put both images (stacked or side-by-side) into a single image a.k.a. spritesheet.

Then on hover, shift the background-position to reveal the other half of the image.

For example, if the images are each 50x50, you could make one 100x50 image with both side-by-side. Let the normal state show the left half only (by keeping the element width to 50 and background-position 0 0) and then slide the background 50px left on hover, to reveal the right half:

background-position: -50px 0;

share|improve this answer

answered Mar 26 at 5:14

adamsimadamsim

10644 bronze badges

background-position: -50px 0;

share|improve this answer

answered Mar 26 at 5:14

adamsimadamsim

10644 bronze badges

answered Mar 26 at 5:14

adamsimadamsim

10644 bronze badges

answered Mar 26 at 5:14

adamsimadamsim

10644 bronze badges