javascript - Images with "display: none" blinking in Firefox before displaying - Stack Overflow

admin管理员组

文章数量:1024186

I have a sequence of images that I want to display one at a time. All the other images are hidden with display: none. The problem is, although I'm waiting all images finish the request, when I change the image to be displayed, the image is blinking. Here is an example:

The issue happens only in Firefox. I also created a JSFiddle with the example above: /

I was able to achieve the expected behavior using opacity property but I still would like to know why the first approach doesn't work as it is the most straightforward solution and also works in all other browsers.

Edit: I forgot to mention the images blink only the first time they are loaded.

I have a sequence of images that I want to display one at a time. All the other images are hidden with display: none. The problem is, although I'm waiting all images finish the request, when I change the image to be displayed, the image is blinking. Here is an example:

The issue happens only in Firefox. I also created a JSFiddle with the example above: https://jsfiddle/ofte9g5v/7/

I was able to achieve the expected behavior using opacity property but I still would like to know why the first approach doesn't work as it is the most straightforward solution and also works in all other browsers.

Edit: I forgot to mention the images blink only the first time they are loaded.

• javascript
• css
• firefox

Share Improve this question Follow edited Jan 2, 2020 at 23:15 Bikas asked Jan 2, 2020 at 23:03 BikasBikas 1,4761212 silver badges1919 bronze badges 1

• What if you display the image first and then hide the others? Make your javascript like this: $($('img')[this.value]).show(); $('img').hide(); – Swetank Poddar Commented Jan 2, 2020 at 23:07

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The problem seems to be that Firefox doesn't decode images until they're within the viewport. So after you set the selected image to display: block; and the other images to display: none, there's a moment where no image is displayed while Firefox decodes the selected image.

The solution I found was to decode() the image prior to changing its display:

selectedImage.decode().then(() => {
    for (var i = 0; i < unselectedImages.length; i++) {
        unselectedImages[i].style.display = 'none';
    }
    selectedImage.style.display = 'block';
})

You're using JavaScript to switch the visibility in two separate calls; first you alter the CSS styles for the visible image, setting its display property to none. It looks like Firefox picks this up and paints faster than other browsers, resulting in no images showing. Next you set the display to block on one of the other images, prompting it to be painted as expected.

Generally when you want to switch between images like this you need to stack the images using CSS in order to prevent these sorts of unwanted effects. Transition Groups are a useful tool to handle transitioning state between hidden, transitioning in, visible, and transitioning out. In this case you can get by with a little CSS:

.imageContainer {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

.img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
  z-index: 1;
}

Then when you want to show an image, simply set the z-index property on it to 2 or higher and set the z-index property on all other images to 1 afterward.

As an alternative, if you need the visible image to be position: relative; what I did was I set visibility:hidden; position: absolute; on the inactive images and visibility: visible; position: relative; on the active one.

I have a sequence of images that I want to display one at a time. All the other images are hidden with display: none. The problem is, although I'm waiting all images finish the request, when I change the image to be displayed, the image is blinking. Here is an example:

The issue happens only in Firefox. I also created a JSFiddle with the example above: /

I was able to achieve the expected behavior using opacity property but I still would like to know why the first approach doesn't work as it is the most straightforward solution and also works in all other browsers.

Edit: I forgot to mention the images blink only the first time they are loaded.

I have a sequence of images that I want to display one at a time. All the other images are hidden with display: none. The problem is, although I'm waiting all images finish the request, when I change the image to be displayed, the image is blinking. Here is an example:

The issue happens only in Firefox. I also created a JSFiddle with the example above: https://jsfiddle/ofte9g5v/7/

I was able to achieve the expected behavior using opacity property but I still would like to know why the first approach doesn't work as it is the most straightforward solution and also works in all other browsers.

Edit: I forgot to mention the images blink only the first time they are loaded.

• javascript
• css
• firefox

Share Improve this question Follow edited Jan 2, 2020 at 23:15 Bikas asked Jan 2, 2020 at 23:03 BikasBikas 1,4761212 silver badges1919 bronze badges 1

• What if you display the image first and then hide the others? Make your javascript like this: $($('img')[this.value]).show(); $('img').hide(); – Swetank Poddar Commented Jan 2, 2020 at 23:07

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The problem seems to be that Firefox doesn't decode images until they're within the viewport. So after you set the selected image to display: block; and the other images to display: none, there's a moment where no image is displayed while Firefox decodes the selected image.

The solution I found was to decode() the image prior to changing its display:

selectedImage.decode().then(() => {
    for (var i = 0; i < unselectedImages.length; i++) {
        unselectedImages[i].style.display = 'none';
    }
    selectedImage.style.display = 'block';
})

You're using JavaScript to switch the visibility in two separate calls; first you alter the CSS styles for the visible image, setting its display property to none. It looks like Firefox picks this up and paints faster than other browsers, resulting in no images showing. Next you set the display to block on one of the other images, prompting it to be painted as expected.

Generally when you want to switch between images like this you need to stack the images using CSS in order to prevent these sorts of unwanted effects. Transition Groups are a useful tool to handle transitioning state between hidden, transitioning in, visible, and transitioning out. In this case you can get by with a little CSS:

.imageContainer {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

.img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
  z-index: 1;
}

Then when you want to show an image, simply set the z-index property on it to 2 or higher and set the z-index property on all other images to 1 afterward.

As an alternative, if you need the visible image to be position: relative; what I did was I set visibility:hidden; position: absolute; on the inactive images and visibility: visible; position: relative; on the active one.

本文标签： javascriptImages with quotdisplay nonequot blinking in Firefox before displayingStack Overflow