Jump to content
Sign in to follow this  
Biotoxsin

Артефакты Transform scale

Recommended Posts

Здравствуйте!

Наверное все знают о артефактах вроде размытия или дёргающегося текста при анимации c помощью transform.

Я сегодня столкнулся с артефактом который проявляется при масштабировании блока в котором находится картинка. Появляется чтото вроде тонкого border'а, снизу и справа картинки примерно в 1px не больше, чёрного цвета.

Ещё никто с таким не сталкивался? Может кто знает как решить проблему, потому что стандартными методами вроде "backface-visibility: hidden" она не решается.

Share this post


Link to post
Share on other sites
13 часа назад, files сказал:

В песочницу закиньте https://jsfiddle.net Здесь не так много экстрасенсов :)


Там слишком маленькое окно для воспроизведения 1px практически не видно. Если хотите, вот обычный стандартный код для воспроизведения.

<html>
  <body>
    <style>
    	body {
          background:#fff;
        }
        .block {
          transition: all ease 1s;
          height:400px;
          width:400px;
          will-change: transform;
          -webkit-backface-visibility: hidden;
        }

        .img {
          height:100px;
          width:100px;
        }

        .block:hover{
          transform:scale(1.5);
        }
    </style>
    <div class="block">
      <div class="img">
        <img width="500px" src="https://www.wallpaperup.com/uploads/wallpapers/2014/09/25/456523/8712bc3014fd5e0bd1fff922e992b966-1400.jpg">
      </div>
    </div>
  </body>
</html>

 

Share this post


Link to post
Share on other sites
6 минут назад, files сказал:

https://jsfiddle.net/1bphskwq (используйте ползунки для увеличения окна)

В браузерах на движке Хром нет бордера.

В том то и дело что это НЕ бордер, это скорее похоже на box-shadow, который появляется случайным образом, снизу и справа по краям (Тоже случайно либо снизу либо справа при анимации). На фулскрин там не растянуть, спасибо я работал на этих ресурсах знаю как ими пользоваться.

Share this post


Link to post
Share on other sites

Вы пробовали демонстрацию на других компьютерах? Возможно все дело в вашей видеокарте, которая не справляется с отрисовкой объекта?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...