Sign in to follow this  
Followers 0
Biotoxsin

Артефакты Transform scale

6 posts in this topic

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

Наверное все знают о артефактах вроде размытия или дёргающегося текста при анимации 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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.