Смещение элемента на финальном кадре

Question

Помогите разобраться. Есть блок в котором есть изображение, svg контур, подпись и фон у подписи. Фон подписи смещен по оси Z от пользователя. При зажатии клавиши мыши, блок, как бы поворачивается к нам лицом. Проблема в подергивании фона, а причина из-за свойства filter: opacity() и любого другого свойства filter, но так же из-за самого свойства opacity. Буду признателен за помощь, в разборе этой ситуации. Я предполагаю, что это из-за процесса отрисовки (рендера), но пока что не нашел ответа.

html {
  font-size: 10px;
}
.slider {
    position: relative;
    perspective: 100rem;
    .slider_frame {
        will-change: transform, scale, display;
        image-rendering: optimizeSpeed;
        transform-style: preserve-3d;
        transition: all .2s ease;
        perspective: 100rem;
        position: absolute;
        display: block;
        right: 0;
        top: 50%;
        aspect-ratio: 16 / 9;
        width: 51rem;
        transform: rotateY(-10deg);
        transform-origin: right top;
        backface-visibility: hidden;
        cursor: grab;
        filter: opacity(0);
    &:first-child {
      filter: opacity(1);
    }
        img {
            position: absolute;
            left: 50.5%;
            top: 53.5%;
            width: 90%;
            transform: translate(-50%, -50%);
            display: block;
            aspect-ratio: 16 / 9;
            z-index: 0;
        }
    }
}
            
.border {
    image-rendering: optimizeQuality;
    backface-visibility: hidden;
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    fill: none;
    stroke: blue;
    stroke-width: 1px;
    z-index: 0;
    perspective: 100rem;
    transform-style: preserve-3d;
    will-change: transform;
}

.bg {
    position: absolute;
    left: 50%;
    top: 50%;
    fill: rgba(70, 151, 180, 0.55);
    transition: all 1s;
    transform-origin: center;
    transform: translate(-50%, -50%) translateZ(-5rem);
    filter: blur(.15rem);
}
.slider_frame:active {
    transform: rotateY(0deg);
    cursor: grabbing;
}

<div class="slider">
  <div class="slider_frame frame_9">
    <img src="./image/frame/9frame.webp" alt="">
    <svg class="border border_img" viewBox="0 0 830 466" preserveAspectRatio="none">
      <path vector-effect="non-scaling-stroke" d="M1,40 11,30 285,30 285,11 275,1 11,1 1,11z"/>
      <text x="12" y="22" class="frame_descr">Rigging & Skinning</text>
      <path vector-effect="non-scaling-stroke" d="M4,65 4,45 14,35 819,35 829,45 829,65 M4,435 4,455 14,465 819,465 829,455 829,435"/>
    </svg>
    <svg class="border border_img bg" viewBox="0 0 830 466" preserveAspectRatio="none">
      <path vector-effect="non-scaling-stroke" d="M1,40 11,30 285,30 285,11 275,1 11,1 1,11z"/>
    </svg>
</div>

Answer 1

Решение:

Убрал из авторского кода всё лишнее, которое либо не работает, либо работает неоднозначно. При совместном использовании SVG и CSS анимаций, изображений и т.д для надежности и краткости решения лучше максимально переносить все элементы в SVG/

В частности фоновая картинка перенесена. Это дает гарантию, что верстка не развалится при изменении разрешения, либо при изменении экрана гаджета.

.slider {
          
        cursor: grab;
        
    }
    .frame_descr {
     
     font: bold 20px sans-serif;
     fill: black;
    }
    .path {
     fill:none;
     stroke:dodgerblue;
     stroke-width:3px;
    }
    #gr1{
    transform-origin: top right;
    transition: all .2s ease;
        position: absolute;
        display: block;
        webkit-transform: rotateZ(-10deg);
        transform: rotateZ(-10deg);
        
    }

:hover#gr1 {
 webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
 }

<div class="slider">
   
<svg class="border border_img" xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" width="100vw" height="30vh" viewBox="70 0 830 650"  style="border:0px solid red;" preserveAspectRatio="xMaxYMin" >
      <g id="gr1" >
        <!-- Для анимации, чтобы не было пустых мест для курсора при наведении     -->
      <rect x="10" y="10" width="875" height="450"  rx="15" ry="15"  
          style="fill: #F9F9F9"/> 
      <text class="frame_descr" x="40" y="22" >Rigging  Skinning</text>
        <!-- Лейбл карточки -->
      <path class="path"  fill="green" stroke="blue" d="M1,40 11,30 285,30 285,11 275,1 11,1 1,11z"/>
      
        <!-- Контур карточки -->
      <path class="path" fill="none" stroke="green" d="M4,65 4,45 14,35 819,35 829,45 829,65 M4,435 4,455 14,465 819,465 829,455 829,435"/>
      
      <image xlink:href="https://i.sstatic.net/rqS8RckZ.webp" y="57" x="-250"   width="100vw" height="45vh" />
     
      </g>
      
    </svg>
    
</div>

БЛОГ НА HUSL

Смещение элемента на финальном кадре

Ответы (1 шт):

Рекомендации

Решение: