BUG, когда background-blend-mode со шкалой покажет границу - PullRequest
Новая
       28

BUG, когда background-blend-mode со шкалой покажет границу

0 голосов
/ 17 апреля 2020

Я пытаюсь использовать background-blend-mode, чтобы показать значок другого цвета. Поскольку на моей странице есть функция scale, цветной значок будет отображать странную цветную рамку.

Простая демонстрация приведена ниже: 

$("#toggle").click(() => {
  $("#container").toggleClass("scale");
});
#box {
display:block;
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAgICAgJCAkKCgkNDgwODRMREBARExwUFhQWFBwrGx8bGx8bKyYuJSMlLiZENS8vNUROQj5CTl9VVV93cXecnNEBCAgICAkICQoKCQ0ODA4NExEQEBETHBQWFBYUHCsbHxsbHxsrJi4lIyUuJkQ1Ly81RE5CPkJOX1VVX3dxd5yc0f/CABEIADAAMAMBIgACEQEDEQH/xAAaAAACAwEBAAAAAAAAAAAAAAAABwUGCAQD/9oACAEBAAAAAH/TkSPu2IJATRCv+csOXR69bihcbnTtkhcbmwbCeGYDTPb/AP/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIQAAAAAH//xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oACAEDEAAAAAB//8QALRAAAAYBAQcDBAMBAAAAAAAAAQIDBAUGACEHERQ2QnWzEBJBEzIzslRyc4L/2gAIAQEAAT8Ayz7Qq7WCnTWW4h78NUdTB/cenB2h2Gy2iDTWX4dmMm23NUdC/l68DaHYa1aJxJFfiGYSbne2W1L+Xoyq7RK9ZQIkktw73+Ktob/ger02r3ufYy60GwX4ZAESCdRPRU/vwAUUMYQAxjamH5HTURyrczQHcmvlDLRzNPdydeUcEFEjFEQMQ2hg+B11AQzZRe599Lowb9fiUBROJFFNVSezLVszkbRcnL9VwRtHfSRL7/uOfcXpDJapQNbo9hTjWZSnGOWA6x9VT6ZVuZoDuTXyhlo5mnu5OvKOVlzQbjXouDkikTkWzUiBBPuTV0+Uj5V9mkhVbk2fpuCOY76Sxff9qhN5eovpeeTrD29b9cq3M0B3Jr5Qy0czT3cnXlHGMRJx8nAOHTNRNFyu3VRUH7DlMYB0H1vPJ1h7et+uVbmaA7k18oZaOZp7uTryjlObN3VKryThEipOAQH2nKBg0D1mIsknDP446oplcoHSMoAbxL7w3YOzyw1q0QiiyPEMwk2u5yj/AK9YdOF2d2Gy2icVRR4dkMm53uVtC/l6MiGBYuJYRpFRUI1QIkBx0E3sDdv9P//EABQRAQAAAAAAAAAAAAAAAAAAADD/2gAIAQIBAT8AH//EABQRAQAAAAAAAAAAAAAAAAAAADD/2gAIAQMBAT8AH//Z");
  width: 100px;
  height: 100px;
  background-color: #f12345;
  background-blend-mode: lighten;
  background-size: 100%;
}
.scale {
  transform: scale(0.9);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <i id="box">
    </i>
</div>

<button id="toggle">Toggle Scale</button>

Эта ошибка вызвана:

  1. элементом use background-blend-mode + background-color
  2. элемента используется масштабируемое число с плавающей точкой
  3. В контейнере элемента используется не фиксированная высота и ширина 

$("#toggle").click(() => {
  $("#container").toggleClass("scale");
});
$("#toggle2").click(() => {
  $("#container").toggleClass("scale-2");
});
$("#togglewh").click(() => {
  $("#box-box").toggleClass("fix-width-and-height");
});
$("#togglewhc").click(() => {
  $("#container").toggleClass("fix-width-and-height");
});
#box {
  display: inline-block;
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAgICAgJCAkKCgkNDgwODRMREBARExwUFhQWFBwrGx8bGx8bKyYuJSMlLiZENS8vNUROQj5CTl9VVV93cXecnNEBCAgICAkICQoKCQ0ODA4NExEQEBETHBQWFBYUHCsbHxsbHxsrJi4lIyUuJkQ1Ly81RE5CPkJOX1VVX3dxd5yc0f/CABEIADAAMAMBIgACEQEDEQH/xAAaAAACAwEBAAAAAAAAAAAAAAAABwUGCAQD/9oACAEBAAAAAH/TkSPu2IJATRCv+csOXR69bihcbnTtkhcbmwbCeGYDTPb/AP/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIQAAAAAH//xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oACAEDEAAAAAB//8QALRAAAAYBAQcDBAMBAAAAAAAAAQIDBAUGACEHERQ2QnWzEBJBEzIzslRyc4L/2gAIAQEAAT8Ayz7Qq7WCnTWW4h78NUdTB/cenB2h2Gy2iDTWX4dmMm23NUdC/l68DaHYa1aJxJFfiGYSbne2W1L+Xoyq7RK9ZQIkktw73+Ktob/ger02r3ufYy60GwX4ZAESCdRPRU/vwAUUMYQAxjamH5HTURyrczQHcmvlDLRzNPdydeUcEFEjFEQMQ2hg+B11AQzZRe599Lowb9fiUBROJFFNVSezLVszkbRcnL9VwRtHfSRL7/uOfcXpDJapQNbo9hTjWZSnGOWA6x9VT6ZVuZoDuTXyhlo5mnu5OvKOVlzQbjXouDkikTkWzUiBBPuTV0+Uj5V9mkhVbk2fpuCOY76Sxff9qhN5eovpeeTrD29b9cq3M0B3Jr5Qy0czT3cnXlHGMRJx8nAOHTNRNFyu3VRUH7DlMYB0H1vPJ1h7et+uVbmaA7k18oZaOZp7uTryjlObN3VKryThEipOAQH2nKBg0D1mIsknDP446oplcoHSMoAbxL7w3YOzyw1q0QiiyPEMwk2u5yj/AK9YdOF2d2Gy2icVRR4dkMm53uVtC/l6MiGBYuJYRpFRUI1QIkBx0E3sDdv9P//EABQRAQAAAAAAAAAAAAAAAAAAADD/2gAIAQIBAT8AH//EABQRAQAAAAAAAAAAAAAAAAAAADD/2gAIAQMBAT8AH//Z");
  width: 100px;
  height: 100px;
  background-color: #f12345;
  background-blend-mode: lighten;
  background-size: 100%;
}
#container {
  background: #fff;
  border:1px  solid #000;
  width: 100%;
  height: 100%;
}
#box-box {
  background: #ddd;
}
#box-box-box {
  width: 300px;
  background: #ccc;
}
.scale {
  transform: scale(0.8);
}
.scale-2{
  transform: scale(2);
  margin-left:1000px;
}
.fix-width-and-height {
  width: 400px !important;
  height:130px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="box-box-box">
    <div id="box-box">
      <i id="box">
      </i>
      #box-box
    </div>
    #box-box-box
  </div>
  #container
</div>

<button id="toggle">Toggle Scale 0.8</button>
<button id="toggle2">Toggle Scale 2</button>
<button id="togglewh">Toggle Fix Width and Height on #box-box</button>
<button id="togglewhc">Toggle Fix Width and Height on #container</button>

Я пытаюсь добавить ограничение ширины и высоты для поля. Оно работает! Но когда дело доходит до моей страницы, это не работает: (

отображаемое изображение изображение консоли

Так что я хочу исправить это исправление без вывода высота контейнера, спасибо!

...