-1

Criei um editor de avatar que posiciona elementos SVG na tela.

Quando coloco na resolução de versão mobile, há um evento estranho acontecendo, que faz com que um único elemento desça, saindo da sua posição original.

Veja neste vídeo o bug: https://youtu.be/0_-y4YXheqc

Eu desconfiei que o camelo no caso do vídeo, ao movimentar, ele esteja sumindo como elemento da tela, porém ele é um elemento absoluto que é posicionado por cima de tudo, então ele não deveria interferir.

Eu percebi que quando eu tento inspecionar ou selecionar qualquer elemento para ver o que acontece, o bug desaparece.

Veja neste outro vídeo: https://youtu.be/Iy1q0ZQIXZw

Daí não consigo entender o problema. Eu gostaria de ter um ponto de partida para conseguir debugar isso.

A HTML:

<script type="text/ng-template" id="my_avatar.html" >
    <div  ng-style="content.opcional_left_top" ng-class="content.opcional_class">
        <div class="baloes" ng-show="display_dialog && !loadingAvatar && svg_avatar_complete">
            <div class="box-baloon-avatar" ng-hide="dialog.hide_dialog" ng-repeat="dialog in getDialogs()" ng-class="{'small':dialog.num_chars <= 55, 'large': dialog.num_chars > 55}">
                <div class="baloon-avatar">
                    <div class="text-dialog"><p ng-bind-html="dialog.text"></p></div>
                </div>
                <div class="pseudo-baloon-avatar"></div>
            </div>

        </div>
        <div ng-if="close_avatar && !loadingAvatar && svg_avatar_complete" class="close-avatar"><a href="javascript:void(0)" ng-click="cancel()" data-toggle="tooltip" title="Fechar Avatar"><i class="fa fa-window-close" aria-hidden="true"></i></a></div>
        <div class="container-display-avatar" ng-if="!loadingAvatar && svg_avatar_complete">
            <div class="container-avatar">
                <div class="my-avatar" ng-show="svg_avatar_complete" ng-cloak class="ng-cloak">

                    <style ng-if="avatarUser.face != null" type="text/css">

                        .my-avatar .model-body-1 .body-1 {
                        fill:{{avatarUser.body.color}}!Important;
                        visibility:visible;
                        opacity:1;
                        }

                        .my-avatar .hair-color .cabeca-1 {
                        fill:{{avatarUser.face.color[0]}}
                        }

                        .my-avatar .face-color .cabeca-1{fill:{{avatarUser.face.color[0]}}!Important}
                        .my-avatar .face-color .cabeca-2{fill:{{avatarUser.face.color[1]}}!Important}
                        .my-avatar .face-color .cabeca-3{fill:{{avatarUser.face.color[2]}}!Important}
                        .my-avatar .face-color .cabeca-4{fill:{{avatarUser.face.color[3]}}!Important}
                        .my-avatar .face-color .cabeca-5{fill:{{avatarUser.face.color[4]}}!Important}


                        .my-avatar .eye-color .eye-9-item-3,
                        .my-avatar .eye-color .eye-11-item-3,
                        .my-avatar .eye-color .eye-12-item-5,
                        .my-avatar .eye-color .eye-13-item-5,
                        .my-avatar .mouth-color .mouth-2-item-boca-1,
                        .my-avatar .mouth-color .mouth-3-item-boca-1,
                        .my-avatar .mouth-color .mouth-4-item-boca-1,
                        .my-avatar .mouth-color .mouth-8-item-boca-1 {
                         fill:{{avatarUser.personal_itens.nose.color}}
                        }
                        .my-avatar .mouth-color .mouth-17-item-boca-1,
                        .my-avatar .mouth-color .mouth-18-item-boca-1,
                        .my-avatar .mouth-color .mouth-19-item-boca-1 {
                         fill:{{avatarUser.face.color[1]}}
                        }
                        .my-avatar .eye-color .eye-5-item-1,
                        .my-avatar .eye-color .eye-16-item-eye-0,
                        .my-avatar .eye-color .eye-14-item-1,
                        .my-avatar .eye-color .eye-16-item-1 {
                          fill:{{avatarUser.face.color[1]}}
                        }
                    </style>

                    <style ng-if="avatarUser.hair != null" type="text/css">

                        .my-avatar .hair-color .hair-1,
                        .my-avatar .hair-color .hair-2,
                        .my-avatar .hair-color .hair-3,
                        .my-avatar .hair-color .hair-4,
                        .my-avatar .hair-color .hair-5,
                        .my-avatar .hair-color .hair-6,
                        .my-avatar .hair-color .hair-7,
                        .my-avatar .hair-color .hair-8,
                        .my-avatar .hair-color .hair-9,
                        .my-avatar .hair-color .hair-10,
                        .my-avatar .hair-color .hair-11,
                        .my-avatar .hair-color .hair-12,
                        .my-avatar .hair-color .hair-13,
                        .my-avatar .hair-color .hair-14,
                        .my-avatar .hair-color .hair-15,
                        .my-avatar .hair-color .hair-16,
                        .my-avatar .hair-color .hair-17,
                        .my-avatar .hair-color .hair-19,
                        .my-avatar .hair-color .hair-20,
                        .my-avatar .eyebrow-color .sobrancelha,
                        .my-avatar .beard-color .beard,
                        .my-avatar .hair-color .avatar-fringe-top .fringe,
                        .my-avatar .fringe-color .fringe,
                        .my-avatar .moustache-color .bigode,
                        .avatar-type-hair.hair-color .hair,
                        .avatar-type-beard.beard-color .barba,
                        .avatar-type-moustache.moustache-color .bigode,
                        .avatar-type-fringe.fringe-color .fringe {
                        fill: {{avatarUser.hair.color}}
                        }

                        .my-avatar .hair-color .skin-read-18,
                        .my-avatar .hair-color .skin-read-19 {
                        fill:{{avatarUser.face.color[5]}}!Important
                        }

                    </style>

                    <style ng-if="avatarUser.personal_itens.nose != null" type="text/css">

                        .my-avatar .nose-color .nariz-1 {
                        fill: {{avatarUser.personal_itens.nose.color}}
                        }

                    </style>

                    <style ng-if="avatarUser.personal_itens.eyebrow != null" type="text/css">

                        .my-avatar .eyebrow-color .sobrancelha {
                        fill: {{avatarUser.personal_itens.eyebrow.color}}
                        }

                    </style>


                    <style ng-if="avatarUser.personal_itens.moustache != null" type="text/css">

                        .my-avatar .moustache-color .bigode {
                        fill: {{avatarUser.personal_itens.moustache.color}}
                        }

                    </style>

                    <style ng-if="avatarUser.personal_itens.beard != null" type="text/css">

                        .my-avatar .beard-color .barba {
                        fill: {{avatarUser.personal_itens.beard.color}}
                        }

                    </style>


                    <style ng-if="loadingAvatar == false" type="text/css">

                        .my-avatar svg {
                            display: block;
                            opacity: 1;
                            /*transition: opacity 2s linear;*/
                        }
                        /*.modal-dialog.modal-my-avatar-intro-right.avatar-animate .modal-content {*/
                            /*opacity: 1;*/
                            /*transition: opacity 1s linear;*/
                            /*width: inherit;*/
                            /*height: inherit;*/

                        /*}*/

                    </style>



                    <!-- face do avatar -->
                    <div class="avatar-type" ng-class="avatarUser.face.model">
                        <!-- rosto -->
                        <div class="avatar-face" ng-if="avatarUser.face != null" ng-class="avatarUser.face.model">
                            <div class="face-color">

                                <div ng-show="!resultSVG.loading" ng-bind-html="resultSVG.face" ng-cloak class="ng-hide ng-cloak"></div>
                            </div>
                        </div>
                    </div>
                    <div class="hair-fringe-top" ng-class="hairFringeAdapt" ng-show="avatarUser.hair.double == true" ng-if="avatarUser.hair != null">
                        <div class="hair-color" ng-class="'fringe-' + avatarUser.face.model">
                            <div class="avatar-fringe-top" ng-include="avatardobleHair" ng-cloak class="ng-hide ng-cloak"></div>
                        </div>
                    </div>
                    <!-- cabelo -->
                    <div class="hair" ng-if="avatarUser.hair != null" ng-class="avatarUser.hair.model">
                        <div class="hair-color" ng-init="">
                            <div ng-show="!resultSVG.loading" ng-bind-html="resultSVG.hair" ng-cloak class="ng-hide ng-cloak"></div>
                        </div>
                    </div>

                    <!-- acessório -->
                    <div class="avatar-accessory" ng-if="avatarUser.accessory != null && ((avatarUser.accessory.purchased && avatarUser.accessory.price > 0) || avatarUser.accessory.price == 0 || avatarUser.accessory.price == null)" ng-class="avatarUser.accessory.model">
                        <div class="accessory-color">
                            <div ng-show="!resultSVG.loading" ng-bind-html="resultSVG.accessory" ng-cloak class="ng-hide ng-cloak"></div>
                        </div>
                    </div>
                    <!-- personalizados -->
                    <div class="personal-itens" ng-if="avatarUser.personal_itens != null">

                        <!-- franja -->
                        <div class="avatar-fringe" ng-if="avatarUser.personal_itens.fringe != null" ng-class="avatarUser.personal_itens.fringe.model">
                            <div class="fringe-color">
                                <div ng-show="!resultSVG.loading" ng-bind-html="resultSVG.fringe" ng-cloak class="ng-hide ng-cloak"></div>
                            </div>
                        </div>
                        <!-- sobrancelhas -->
                        <div class="avatar-eyebrow" ng-if="avatarUser.personal_itens.eyebrow != null"  ng-class="avatarUser.personal_itens.eyebrow.model">
                            <div class="eyebrow-color">
                                <div ng-show="!resultSVG.loading" ng-bind-html="resultSVG.eyebrow" ng-cloak class="ng-hide ng-cloak"></div>
                            </div>
                        </div>
                        <!-- olhos -->
                        <div class="avatar-eye" ng-if="avatarUser.personal_itens.eye != null" ng-class="avatarUser.personal_itens.eye.model">
                            <div class="eye-color">
                                <div ng-show="!resultSVG.loading" ng-bind-html="resultSVG.eye" ng-cloak class="ng-hide ng-cloak"></div>
                            </div>
                        </div>
                        <!-- nariz -->
                        <div class="face-color">
                            <div class="avatar-nose" ng-if="avatarUser.personal_itens.nose != null" ng-class="avatarUser.personal_itens.nose.model">
                                <div class="nose-color">
                                    <div ng-show="!resultSVG.loading" ng-bind-html="resultSVG.nose" ng-cloak class="ng-hide ng-cloak"></div>
                                </div>
                            </div>
                        </div>
                        <!-- bigode -->
                        <div class="avatar-moustache" ng-if="avatarUser.personal_itens.moustache != null" ng-class="avatarUser.personal_itens.moustache.model">
                            <div class="moustache-color">
                                <div ng-show="!resultSVG.loading" ng-bind-html="resultSVG.moustache" ng-cloak class="ng-hide ng-cloak"></div>
                            </div>
                        </div>
                        <!-- barba -->
                        <div class="avatar-beard" ng-if="avatarUser.personal_itens.beard != null" ng-class="avatarUser.personal_itens.beard.model">
                            <div class="beard-color">
                                <div ng-show="!resultSVG.loading" ng-bind-html="resultSVG.beard" ng-cloak class="ng-hide ng-cloak"></div>
                            </div>
                        </div>
                        <!-- boca -->
                        <div class="avatar-mouth" ng-if="avatarUser.personal_itens.mouth != null" ng-class="avatarUser.personal_itens.mouth.model">
                            <div class="mouth-color">
                                <div ng-show="!resultSVG.loading" ng-bind-html="resultSVG.mouth" ng-cloak class="ng-hide ng-cloak"></div>
                            </div>
                        </div>
                    </div>

                    <div class="avatar-body" ng-class="avatarUser.body.model">
                        <!-- body : obs: o corpo começa em cima -->
                        <div class="body-color">
                            <div class="body-canvas" ng-class="avatarUser.body.type_item" ng-if="avatarUser.body.image != ''">
                                <div ng-show="!resultSVG.loading" ng-bind-html="resultSVG.body" ng-cloak class="ng-hide ng-cloak"></div>
                            </div>
                        </div>
                    </div>

                    <!-- superior -->
                    <div class="avatar-clothes-up" ng-if="avatarUser.up != null" ng-class="avatarUser.up.model">
                        <div class="up-color">
                            <div ng-show="!resultSVG.loading" ng-bind-html="resultSVG.up" ng-cloak class="ng-hide ng-cloak"></div>
                        </div>
                    </div>
                    <!-- inferior -->
                    <div class="avatar-clothes-down" ng-if="avatarUser.down != null" ng-class="avatarUser.down.model">
                        <div class="down-color">
                            <div ng-show="!resultSVG.loading" ng-bind-html="resultSVG.down" ng-cloak class="ng-hide ng-cloak"></div>
                        </div>
                    </div>
                    <!-- calçado -->
                    <div class="avatar-shoe" ng-if="avatarUser.shoe != null" ng-class="avatarUser.shoe.model">
                        <div class="shoe-color">
                            <div ng-show="!resultSVG.loading" ng-bind-html="resultSVG.shoe" ng-cloak class="ng-hide ng-cloak"></div>
                        </div>
                    </div>
                    <img ng-if="avatarUser.face != null" ng-src="{{shadow_avatar}}" border="0" class="shadow-img">
                </div>
            </div>
        </div>
    </div>
</script>

O controller:

https://gist.github.com/ivanferrer/258a2d776aafd813ffa5b9cb587b4e5b

Exemplo do Avatar renderizado

2
  • Tem algum link com a página acessível onde de para testar esse comportamento?
    – hugocsl
    Commented 20/03/2020 às 14:24
  • tem esse: jsfiddle.net/9u6vaqpb Commented 20/03/2020 às 16:13

1 Resposta 1

0

Resolvi o problema, bastou incluir isso no CSS:

 .my-avatar .hair-fringe-top {
     position: absolute;
 }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .