CSS: проблема порядка размещения в Safari - PullRequest
Новая
       27

CSS: проблема порядка размещения в Safari

1 голос
/ 11 ноября 2019

Я пытаюсь создать фигуру с помощью CSS, используя псевдоэлементы до и после. Форма отображается так, как я ожидаю в Chrome и Firefox, однако в Safari содержимое: before доходит до уровня: after, и я не уверен, почему. Похоже, что это как-то связано с преобразованием в элементе my: before, но я не уверен, что именно я сделал неправильно, и почему в Safari все по-другому, и я не могу понять, как это исправить.

Это то, что я получаю в Chrome / Firefox , и это то, что я получаю в Safari 

.outer {
  position: absolute;
  top: 50px;
  left: 100px;
  transform: rotate(27deg);
}

.shape {
  position: absolute;
	height: 100px;
	width: 100px;
	background-color: blue;
	border-radius: 50%;
}
.shape:before {
  content: '';
  position: absolute;
  left: 36px;
  top: 26px;
  width: 200px;
  height: 48px;
  background-color: inherit;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  transform: perspective(200px) rotateY(70deg);
}
.shape:after {
  content: '';
  position: absolute;
  top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(blue 17%, transparent 19%),
    radial-gradient(red 26%, transparent 28%),
    radial-gradient(blue 40%, transparent 42%),
    red;
}
<div class="outer">
  <div class="shape"></div>
</div>

1 Ответ

0 голосов
/ 11 ноября 2019

Не знаю точно, в чем проблема (и я не могу проверить), но вы можете настроить форму :before, чтобы учесть радиальный градиент, чтобы создать прозрачную деталь и избежать перекрытия, даже когда элемент находится сверху.

Вот пример, где я явно сделал :before сверху, и это работает. Я также немного уменьшил код. 

.shape {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 100px;
  transform: rotate(27deg);
}

.shape:before {
  content: '';
  position: absolute;
  left: 36px;
  top: 26px;
  width: 200px;
  height: 48px;
  background: radial-gradient(25px 23px at left,transparent 98%, blue 100%);
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  transform: perspective(200px) rotateY(70deg);
  z-index:1;
}

.shape:after {
  content: '';
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 50%;
  border:4px solid blue;
  background: 
   radial-gradient(blue 17%, transparent 19%), 
   radial-gradient(red  26%, transparent 28%), 
   radial-gradient(blue 40%, transparent 42%), 
   red;
}
<div class="shape"></div>
...