-1
I created an avatar editor that places SVG elements on the screen.
When I put in the resolution of mobile version, there is a strange event happening, which causes a single element to descend, leaving its original position.
See in this video the bug: https://youtu.be/0_-y4YXheqc
I suspected that the camel in the case of the video, while moving, it is disappearing as an element of the screen, but it is an absolute element that is positioned on top of everything, so it should not interfere.
I realized that when I try to inspect or select any element to see what happens, the bug disappears.
See in this other video: https://youtu.be/Iy1q0ZQIXZw
Hence I can not understand the problem. I would like to have a starting point to be able to debug this.
THE 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>
The controller:
https://gist.github.com/ivanferrer/258a2d776aafd813ffa5b9cb587b4e5b
Have some link with the accessible page where to test this behavior?
– hugocsl
has that: https://jsfiddle.net/9u6vaqpb/
– Ivan Ferrer