Html Question posted in
Some basic documentation can be found here.

Html – Unwanted background on an div animation before the page finish loading

I spent a few hours and couldn’t find a fix

On this site https://2sync.com
I have the text animation is getting a weird blue background that disappears after the page is loaded.

Here’s a GIF:

Demo of the unwanted background

I’m getting this on Arc browser: Version 1.30.0 (46409)
Chromium Engine Version 121.0.6167.184

This happens only on the production site, and couldn’t replicate it on the dev environment. When I remove the animation, it’s fixed (but I still want the animation)/

FYI, here’s the SCSS code I’m using:

  .scrolling-words-box {
    display: inline-block;
    height: 3rem;
    margin: auto;
    overflow: hidden;
    user-select: none;
    transform: translateY(10px);

    ul {
      padding: 0;
      animation: text-scroll-up 8s infinite;

      li {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 3rem;
        list-style: none;
      }
    }
  }

  // Variables
  $item-count: 4;

  @keyframes text-scroll-up {
    @for $i from 1 through ($item-count - 1) {
      #{($i * 25) - 10%}, #{$i * 25%} {
        transform: translateY(((-100% / $item-count) * $i));
      }
    }
  }

With the following HTML

<div class="scrolling-words-box">
    <div class="scrolling-words-content">
      <ul>
        <li style="color: #ea4335;">
          Todoist
        </li>
        <li style="color: #4285f4;">
          Calendar
        </li>
        <li style="color: #34a853;">
          Emails
        </li>
        <li style="color: #fbbc04;">
          Contacts
        </li>
      </ul>
    </div>
  </div>
Tags:

2

Answers


  1. 0

    It has something to do with the --v-primary-base, here:

    .v-application .accent--text {
    color: var(--v-accent-base) !important;
    caret-color: var(--v-accent-base) !important;
}

    It might help if you define a transparent color as a separate CSS variable, like this, for example:

    :root {
  --v-primary-base-2: transparent;
}

    and call it with var(--v-accent-base-2).

    Login or Signup to reply.
  2. 0

    I reviewed your current working site and found that some CSS is update after loading the page.

    The background color that appears on the whole text is the background color of soon label, which you have applied. It appears because the parent can’t find position: relative; css before the complete load page. So add/update below css

    .scrolling-words-box ul li .v-chip {
    position: relative;
    border-radius: 12px;
    line-height: 20px;
}

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search