2

В браузере на WebKit`е в данном примере:

#myid {
  width: 400px;
  height: 400px;
  border: solid black;
  border-radius: 40px;
  overflow: hidden;
  position: relative;
}

#myid::after {
  position: absolute;
  content: '';
  width: 100px;
  height: 100px;
  background-color: yellow;
  top: 10px;
  left: 100px;
  transition: transform 5s linear 0s;
}

#myid:hover::after {
  transform: scale(10);
}
<div id="myid">
</div>

JSFiddle

наблюдается следующая проблема: при наведении на желтый квадрат, он увеличивается, но не обрезается по скругленным углам родителя, в отличие от firefox, как решить эту проблему?

1 ответ 1

4

нужно добавить

#myid {
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

в урле картинка. Код когда-то взял здесь, и использовал

#myid {
  width: 400px;
  height: 400px;
  border: solid black;
  border-radius: 40px;
  -webkit-border-radius: 40px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
#myid::after {
  position: absolute;
  content: '';
  width: 100px;
  height: 100px;
  background-color: yellow;
  top: 10px;
  left: 100px;
  transition: transform 5s linear 0s;
}
#myid:hover::after {
  transform: scale(10);
}
<div id="myid">
</div>
Это скорее всего баг webkit, как это работает описано здесь

Вот здесь Нашел ещё одно решение, только для него нужно 3 слоя (т.е. нужно для примера выше взять ещё один слой):

#wrapper {
  position: absolute;
}
#middle {
  border-radius: 100px;
  overflow: hidden;
}
#box {
  width: 300px;
  height: 300px;
  background-color: #cde;
}
<div id="wrapper">
  <div id="middle">
    <div id="box">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Vivamus
      sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</div>
  </div>
</div>

5
  • Но тогда перестает работать box-shadow
    – Igor Mahov
    5 янв 2017 в 10:39
  • @ИгорьМахов - только что проверил - работает отлично fiddle.jshell.net/7vqtxfkh/1
    – Alex
    5 янв 2017 в 11:02
  • Я имел ввиду у родителя jsfiddle.net/Igrogro/nhepn9cx/1
    – Igor Mahov
    5 янв 2017 в 11:26
  • @Alex А можете сделать ваш код запускаемым? А также вопрос, что это за значение base64? Почему такое, а не какое-нибудь другое? 5 янв 2017 в 15:49
  • @VadimOvchinnikov это просто закодированное в base 64 изображение размером 1x1px чёрного цвета 5 янв 2017 в 17:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.