[EuiPopover] Some contents blinks in Safari

[cchaos]

This doesn't seem to happen on other EuiPopover instances from what I can tell. Though could be attributed to some auto-focus bit. But the contents is there during the animation, then when the animation stops the content disappears for a moment then reappears. (Only in Safari)

Screen.Recording.2021-02-16.at.12.48.21.PM.mp4

[anuragxxd]

@cchaos If this doesn't need any design work I am willing to work on this. Also just to know is this bug only exist in safari.

[cchaos]

Shouldn't be a design specific issue and yes only in Safari. Thanks!

[anuragxxd]

Working on it.

[anuragxxd]

@cchaos I got the solution for this I believe that properties assigned to *:before, *:after cause recent versions of Webkit to evaluate these pseudo elements for all elements whenever a repaint occurs. You can reproduce this effect on any website by using the web inspector to add any style rule to the *:before, *:after selector. When you resize, repaints will trigger and you'll see :before and :after flicker in and out of existence, and elements without children will briefly show an expand triangle as the browser evaluates pseudo elements.

To fix this we have to Remove all style rules for *:before, *:after. We can't use the cascade to override those styles since any style rule for this selector will trigger the bug.

Below is the styling of the EuiPopover which uses *:before, *:after.

.euiPopover__panel {
  // Ignore linting for legibility of transition property, and the mixin performs an overwrite
  // sass-lint:disable-block indentation
  @include euiBottomShadow($adjustBorders: true);
  position: absolute;
  min-width: $euiButtonMinWidth; /* 1 */
  max-width: calc(100vw - #{$euiSizeXL}); /* 3 */
  backface-visibility: hidden;
  pointer-events: none;
  opacity: 0; /* 2 */
  visibility: hidden; /* 2 */
  transition: /* 2 */
    opacity $euiAnimSlightBounce $euiAnimSpeedSlow,
    visibility $euiAnimSlightBounce $euiAnimSpeedSlow;

  // Don't animate when using the attached mode like for inputs
  &:not(.euiPopover__panel-isAttached) {
    transform: translateY(0) translateX(0) translateZ(0); /* 2 */
    transition: /* 2 */
      opacity $euiAnimSlightBounce $euiAnimSpeedSlow,
      visibility $euiAnimSlightBounce $euiAnimSpeedSlow,
      transform $euiAnimSlightBounce ($euiAnimSpeedSlow + 100ms);
  }

  &.euiPopover__panel-isOpen {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .euiPopover__panelArrow {
    position: absolute;
    width: 0;
    height: 0;

    // This fakes a border on the arrow.
    &:before {
      position: absolute;
      content: '';
      height: 0;
      width: 0;
    }

    // This part of the arrow matches the panel.
    &:after {
      position: absolute;
      content: '';
      height: 0;
      width: 0;
    }

    &.euiPopover__panelArrow--top {
      &:before {
        bottom: -$euiPopoverArrowSize + 2;
        border-left: $euiPopoverArrowSize solid transparent;
        border-right: $euiPopoverArrowSize solid transparent;
        border-top: $euiPopoverArrowSize solid $euiBorderColor;
      }

      &:after {
        bottom: -$euiPopoverArrowSize + 3;
        border-left: $euiPopoverArrowSize solid transparent;
        border-right: $euiPopoverArrowSize solid transparent;
        border-top: $euiPopoverArrowSize solid $euiColorEmptyShade;
      }
    }

    &.euiPopover__panelArrow--right {
      &:before {
        left: -$euiPopoverArrowSize;
        top: 50%;
        border-top: $euiPopoverArrowSize solid transparent;
        border-bottom: $euiPopoverArrowSize solid transparent;
        border-right: $euiPopoverArrowSize solid $euiBorderColor;
      }

      &:after {
        left: -$euiPopoverArrowSize + 1;
        top: 50%;
        border-top: $euiPopoverArrowSize solid transparent;
        border-bottom: $euiPopoverArrowSize solid transparent;
        border-right: $euiPopoverArrowSize solid $euiColorEmptyShade;
      }
    }

    &.euiPopover__panelArrow--bottom {
      &:before {
        top: -$euiPopoverArrowSize;
        border-left: $euiPopoverArrowSize solid transparent;
        border-right: $euiPopoverArrowSize solid transparent;
        border-bottom: $euiPopoverArrowSize solid $euiBorderColor;
      }

      &:after {
        top: -$euiPopoverArrowSize + 1;
        border-left: $euiPopoverArrowSize solid transparent;
        border-right: $euiPopoverArrowSize solid transparent;
        border-bottom: $euiPopoverArrowSize solid $euiColorEmptyShade;
      }
    }

    &.euiPopover__panelArrow--left {
      &:before {
        right: -$euiPopoverArrowSize + 1;
        top: 50%;
        border-top: $euiPopoverArrowSize solid transparent;
        border-bottom: $euiPopoverArrowSize solid transparent;
        border-left: $euiPopoverArrowSize solid $euiBorderColor;
      }

      &:after {
        right: -$euiPopoverArrowSize + 2;
        top: 50%;
        border-top: $euiPopoverArrowSize solid transparent;
        border-bottom: $euiPopoverArrowSize solid transparent;
        border-left: $euiPopoverArrowSize solid $euiColorEmptyShade;
      }
    }
  }


  &.euiPopover__panel-noArrow .euiPopover__panelArrow {
    display: none;
  }

  &.euiPopover__panel-isAttached.euiPopover__panel--bottom {
    border-top-color: transparentize($euiBorderColor, .2);
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }

  &.euiPopover__panel-isAttached.euiPopover__panel--top {
    @include euiBottomShadowFlat;

    border-bottom-color: transparentize($euiBorderColor, .2);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}

[cchaos]

Thanks for investigating this @git-anurag-hub. As I was testing this theory in the Safari inspector, I found that more so than the pseudo elements, are all the transitions on the elements within the popover that get rerun once the popover's animation is stopped.

Both properties pose a problem that are not easily solvable. We can't just blanket remove all pseudo elements or transitions from these components. This will require more investigating to see if there's a way to solve at the JS/React level to discourage repaints.

[cchaos]

Looks like this does happen with some other popover configurations.

The issue only happens in Safari. I couldn't reproduce it in codesandbox because of problems with running eui in safari on codesandbox so I have this branch that reproduces the issue inside the demo eui page.
master...mbondyra:check_popover

The problem is that after opening the popover, the labels appear much later than the rest of the content:

_Originally posted in #4717 by @mbondyra _

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[cchaos]

What timing, actions bot! This will most likely be fixed by #5249

[cchaos]

Actually I can't replicate this at all in Safari anymore. Closing