Remove white from fade

HTML & CSS
1

To reproduce click the blue play image

.containerb

It doesn’t seem to happen on .containera, only b.

Removing the button code from the css resolves the issue, but that isn’t being removed, so how is the issue fixed?

How would this code be fixed so the fade looks the same as the other code?

https://jsitor.com/MsWZAykFL

 .bodyfadea{
  opacity: 0;
  background: #353198;
  animation: fadeBody 5s ease forwards;
}

.bodyfadea body {
  background-image:

709×399 9.69 KB

The fade in should look like this.
https://jsitor.com/wUlv9xAcLV

  .containera{
  width: 100%;
  opacity: 0;
  animation: fade 5s ease  0s forwards;

2

Sorry I have no idea what you mean. I don’t see anything different apart from your little boxes not filling the viewport in one of the demos.

Screen Shot 2021-08-20 at 19.19.53
Screen Shot 2021-08-20 at 19.19.53947×895 63.7 KB

I don’t see any white flash.

3

On this code, are you able to see this fade effect when you click on the blue image?

Can you post an image of that fade, because I don’t see any purple visible.

I see no purple at all.

https://jsitor.com/MsWZAykFL 

 .bodyfadea{
  opacity: 0;
  background: #353198;
  animation: fadeBody 5s ease forwards;
}

.bodyfadea body {
  background-image:

I don’t see this:

4

When I click on the blue play image I see no purple at all in the fade.

This should be the color of the background which is purple.

https://jsitor.com/MsWZAykFL

1280×695 40.7 KB

5

Sorry, I have no idea what you mean. I can’t see any difference between the fade when you click either button.

I don’t even know how I’d capture a screenshot of a fraction of a section during a fade in other than to video record it and then step through frame by frame. I’d rather watch paint dry :slight_smile:

1 Like
6

PrtScn then paste it.

7

Maybe it could be this.

8

There is no PrtScn on my mac. To get a screenshot I have press ctrl and shift4 which enables crosshairs and then I have to drag the crosshairs around the element concerned and then release the mouse. That takes me about 5 seconds to do so would never see a fade effect.:slight_smile:

It doesn’t seem likely because you aren’t fading out one image and then fading in another.

You say it only happens on containerb and the likely cause is that container b contains loads of ‘complex’ elements that need to be rendered and flex needs to work out where these go so you could possibly get some sort of delay on slower machines and maybe see a flash. That’s just a hypothesis as I see absolutely no difference on my machine between containera and containerb.

Note that linear gradients are well known to push the css parser to its limits. In original incarnations on Firefox you could hardly scroll the viewport when a linear gradient was applied.

These are all just observations and indeed you may have an issue but unless I can see it for myself I can’t really help.

2 Likes
9

.containera is not being used in the css, only the javascript. and the html.

Everything is nested inside .contianera though.

<div class="containera hide">

  <div class="video-wrapper">
    <div class="ratio-keeper">
      <div class="wrapa">
        <div class="video video-frame"></div>
      </div>
    </div>
  </div>
</div>

ContainerA

 .bodyfadea{
  opacity: 0;
  background: #353198;
  animation: fadeBody 5s ease forwards;
}

.bodyfadea body {
  background-image:
}

@keyframes fadeBody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

ContainerB

.containerb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    width: 582px;
    overflow: hidden;
    min-width: 582px;
}

 .bodyfadeb {
  opacity: 0;
  background: #353198;
  animation: fadeBody 5s ease forwards;
}

.bodyfadeb body {
  background-image:
}

@keyframes fadeBody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

 .bodyfadea body:before,
  .bodyfadeb body:before{
    content:"";
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:inherit;
  }

Here are better images.

https://jsitor.com/MkVaQJQEb

White Flash that is seen

1280×695 40.7 KB

Exactly how the fade in should look

1261×482 15.3 KB

10

Can this be investigated further?
https://jsitor.com/IaanY9XVJC

Gradient Removed

The white flash is still there.

.containerb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  width: 582px;
  overflow: hidden;
  min-width: 582px;
}

.bodyfadeb {
  opacity: 0;
  background: #353198;
  animation: fadeBody 5s ease forwards;
}

.bodyfadeb body {}


/* .bodyfadea body:before,
.bodyfadeb body:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: inherit;
}*/

document.querySelector("html").classList.add("bodyfadeb");

1247×466 20.2 KB

11

Investigating further:

White flash is still there.

https://jsitor.com/qg5vvmkz9

<div class="containerb hide">
</div>

.containerb {
width: 582px;
height: 500px;
background:red;
}

.bodyfadeb {
  opacity: 0;
  background: #353198;
  animation: fadeBody 5s ease forwards;
}

.bodyfadeb body {}


/* .bodyfadea body:before,
.bodyfadeb body:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: inherit;
}*/

document.querySelector("html").classList.add("bodyfadeb");

917×430 280 Bytes

12

When changed to this:

https://jsitor.com/FQDUoiEf-T

White Flash is gone.

What does this tell you?

.containerb {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

905×300 327 Bytes

13

Someone said this to me.

when the size of the document isn’t large enough to show all of the switches, that causes the white flash to occur.

Could that be the reason why, and if so, what would fix it?

14

What does this tell you?
https://jsitor.com/Fn5H7w6_0K

.containerb {
  width: 500px;
  height: 500px;
  background: red;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

Not full screen mode

White Flash

Full Screen mode

No White Flash

How would that be fixed or adjusted in the original code?

To prevent the white flash from occurring?

1280×720 13.7 KB

15

This fixes the issue.

Changing html to body.

White flash is no longer there.

document.querySelector("body").classList.add("bodyfadeb");

But doing that also removes the background image.

https://jsitor.com/PRTu9Ot4Bf

How would I get the background image to be viewable?


.containerb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    width: 582px;
    overflow: hidden;
    min-width: 582px;
}

 .bodyfadeb {
  opacity: 0;
  background: #353198;
  animation: fadeBody 5s ease forwards;
}

.bodyfadeb body {
  background-image:

}

@keyframes fadeBody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

 .bodyfadea body:before,
  .bodyfadeb body:before{
    content:"";
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:inherit;
  }
16

OK I recorded a video then went through frame by frame and took screenshots,

This is what I see during initial fade.

Screen Shot 2021-08-22 at 13.49.48
Screen Shot 2021-08-22 at 13.49.48927×982 83.7 KB

Screen Shot 2021-08-22 at 13.50.02
Screen Shot 2021-08-22 at 13.50.02925×984 141 KB

Screen Shot 2021-08-22 at 13.50.13
Screen Shot 2021-08-22 at 13.50.13911×976 201 KB

17

Try it on: iPhone XS Max/XR/11 (414 x 896)

or iPhone 5 (320 x 568)

or iPhone 6/7/8 (375 x 667)

or iPhone 6+/7+/8+ (414 x 736)

or iPhone X/XS/11 Pro (375 x 812)

Set it to one of those.
Any of the iPhone ones.

Tell me if you see a white flash.

464×506 23.8 KB

18

It looks like the issue may be that when your buttons are larger than the viewport then the white flash appears (apart from that last screenshot which is a mystery). At least that’s the only way I have managed to make it happen.

You can test on your machine by removing all the buttons except 3 and then see if the flash goes away.

If you can confirm that behaviour then you can try this fix.

At line 181 change this keyframe as follows.

@keyframes fadeBody {
  0% {
    opacity: 0;
    overflow:hidden;
  }

  100% {
    opacity: 1;
    overflow:visible;
  }
}

Note that you have two versions of that same keyframe in your code which is nonsense as there can only be one animation with that name. Use one or the other not both.

You also seem to be repeating the same gradient code for containerb when you could have merged them into one rule. I know you had two versions before but if a and b are using the same background then comma separate the rules and just supply the gradient once.

1 Like
19

The white flash is still there.
https://jsitor.com/dEdB1clJV

The scrollbar should be visible right after click.

In what you had me do, in this example, when the scrollbar pops up, it is causing a white flash.

The code you had me put in delays the scrollbar.

There shouldn’t be a delay in the scrollbar showing.

The scrollbar should be there right after click all throughout the fade in effect.

20

Well I’ve finally identified the problem for you so its your turn to find the solution.:slight_smile: My solution would be to build the whole thing from the ground up rather than forever tweaking an awkward structure.

As an aside note that you don’t get a scroll bar on a real iphone so you can’t have it show. It only shows when you touch the screen and swipe. That’s not a real representation of an iphone its just a box at that size. :slight_smile:

1 Like