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