Problem pojawia się wtedy, gdy mamy skalowany element nadrzędny i elementy potomne z position:fixed:
.parent {
transform: scale(2);
transform-origin: 0 0 0;
}
.child {
position:fixed;
}
Łamie dziecko position:fixed spowodowany scale(2) na elemencie nadrzędnym. Problem znany jest od 2 lat temu. Czy istnieje obejście tego problemu?
Naprawdę muszę używać skali na rodzicu i pozycji: z jakiegoś powodu naprawiona na dzieciach.
Odpowiedzi:
0 dla odpowiedzi № 1Nie wiem, gdzie chcesz ustawić dzieckoelement. Wiem jednak, że w twoim przypadku dolne i prawe atrybuty pozycjonujące atrybut potomny nie działają zgodnie z oczekiwaniami. Jednak górna i lewa właściwość działają.
Aby umieścić element potomny w prawym dolnym rogu, znalazłem następujące obejście:
<html>
<head>
<style>
.parent {
transform: scale(2);
transform-origin: 0 0 0;
background-color: blue;
}
.child {
position: fixed;
left: calc(50vw - 100px);
top: calc(50vh - 100px);
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
parent
<div class="child">child</div>
</div>
</body>
</html>
Z jakiegoś powodu rzutnia dziecka zwiększa się o skalę rodzica. Z tego powodu musisz zmniejszyć rzutnię o 50% w przypadku skalowania 2 razy.
Jeśli to nie pomoże, daj mi znać, gdzie chcesz umieścić element potomny.