Дочерний SVGSVGElement исчезает во время преобразования преобразования (Safari / Chrome) - PullRequest
Новая
       63

Дочерний SVGSVGElement исчезает во время преобразования преобразования (Safari / Chrome)

0 голосов
/ 08 мая 2020

Дочерний элемент исчезает при изменении преобразования контейнера (с переходом) в Safari / Chrome. Проблема возникает чаще, когда дочерний элемент является SVGSVGElement, масштаб> ~ 3 и с быстрыми изменениями для преобразования.

Настройка transform3d или backface-visibility:hidden на дочерний элемент не влияет. willChange:transform на преобразованный элемент не влияет.

Не происходит в Firefox - переход может зависнуть, а затем перейти к концу.

Наиболее часто проблема может возникать в следующем автономном примере путем повторного нажатия 1,2,3 в быстрая последовательность.

Встречается в Safari и Chrome на ma c, а также в мобильном сафари при аналогичных условиях.

Это известная проблема / ограничение? Есть ли информация о жестких ограничениях на переходы CSS? Я что-то делаю в примере неправильно? 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">        
    <meta charset="utf-8" name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>Zoom test</title>
    <style>

         html, body {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
        }     
        #wrapper{
            transition:all 1s;
        }
    </style>
</head>
<body touch-action="none">
    <div id="wrapper">          
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><defs><style>.cls-1{fill:#fbd3d4;}.cls-2{fill:none;stroke:#231f20;stroke-miterlimit:10;}</style></defs><title>lines</title><rect class="cls-1" width="612" height="792"/><polyline class="cls-2" points="28.35 5.25 585.49 5.25 28.35 68.51 585.49 84.84 28.35 135.86"/><polyline class="cls-2" points="28.35 135.86 585.49 135.86 28.35 199.12 585.49 215.45 28.35 266.47"/><polyline class="cls-2" points="28.35 266.47 585.49 266.47 28.35 329.73 585.49 346.06 28.35 397.08"/><polyline class="cls-2" points="28.35 397.08 585.49 397.08 28.35 460.35 585.49 476.67 28.35 527.69"/><polyline class="cls-2" points="28.35 527.69 585.49 527.69 28.35 590.96 585.49 607.28 28.35 658.31"/><polyline class="cls-2" points="28.35 658.31 585.49 658.31 28.35 721.57 585.49 737.9 28.35 788.92"/></svg>        
    </div>
    <script>        
        var w = document.querySelector("#wrapper");        
        document.addEventListener("keydown",(e)=>{
            w.style.transformOrigin = "0 0";
            if(e.key == "1"){
                w.style.transform = "translate(0px,0px) scale(1)"
            }else if(e.key == "2"){
                w.style.transform = "translate(200px,200px) scale(4)"                                    
            }else if(e.key == "3"){
                w.style.transform = "translate(-1200px,-4000px) scale(7)"
            }
        })
    </script>
</body>
</html>

Example

...