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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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