Sliding curtains still visible when fully opened

HTML & CSS
1

Would this be a 1px rounding error issue of some sort?

https://jsitor.com/t53KLIx4H

Is there a way that can be fixed in the code?

2

I’m on a mobile at the moment but as a guess try translating it to +/- 100% + 1px using calc in the relevant key frame similar to the way the width is defined.

3

This worked, but I don’t know how to get the numbers right.

This has the curtains open too fast.

@keyframes curtain1 {
  to {
    transform: translateX(-100%);
      width: calc(-100% + 1px);
  }
}
4

Why are you messing about with the width?

translateX(calc(-100% +1px))

5

I don’t think this did anything in the code, unless I wrote it wrong.

https://jsitor.com/t53KLIx4H

@keyframes curtain1 {
  to {
    transform: translateX(-100%);
    transform: translateX(calc(-100% +1px));
  }
}
6

Why have you written it twice?

You may need an extra set of brackets in there but I think it should be ok without. I’ll need to test when I get back to the computer.

translateX(calc(-(100% +1px)));

I don’t think the extra brackets are needed though.

You also have to adjust the other key frame in the same way.

Play around with the px value and see if it makes a difference.

7

I see no difference in the code

@keyframes curtain1 {
  to {
    transform: translateX(-100%);
    transform: translateX(calc(-(100% -2500px)));
  }
}

.container.active .curtain .panel-right {
  animation: curtain2 8s forwards 1s;
}

@keyframes curtain2 {
  to {
    transform: translateX(100%);
    transform: translateX(calc(+(100% -2500px)));
  }
}

This worked:
But it has to go back down to 50%

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: calc(100% + 1px);
8

Remove the duplicate rule in case it upsets the key frame.

Are you sure you are looking at the curtain and not something else?

Use devtools and set those 2 elements to display: none when it has opened and see if they are the culprits.

Otherwise you’ll have to wait until I get back home :slight_smile:

9

Just looked in Firefox and Chrome at that original link and I’m not seeing an overlap at any size and don’t see it in mobile either. What browser is that and how do you get that to happen as the iframe is on top anyway.

The calc works for me like this anyway.

@keyframes curtain1 {

  to {

    transform: translateX(calc(-100% - 10px));

  }

}

@keyframes curtain2 {

  to {

    transform: translateX(calc(100% + 10px));

  }

}
1 Like
10

That worked.

And I changed 10px to 1px, and that worked also.

I’m on Chrome.
https://jsitor.com/t53KLIx4H

.container.active .curtain .panel-left {
  animation: curtain1 8s forwards 1s;
}

@keyframes curtain1 {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}
.container.active .curtain .panel-right {
  animation: curtain2 8s forwards 1s;
}

@keyframes curtain2 {
  to {
    transform: translateX(calc(100% + 1px));
  }
}
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.