[GitHub] wubiaoqing opened a new issue #1931: div property 'width' cause Style flicker

[GitBox <gi...@apache.org>]

wubiaoqing opened a new issue #1931:  div property 'width' cause Style flicker
URL: https://github.com/apache/incubator-weex/issues/1931
 
 
   ## appearance
   Style flicker
   as the source code  below,i change the div property 'width' to let the progress button progress change,but it cause Style flicker
   
   ## Environment
   * Device: [xiaomi 5s plus]
   * OS: [android 7.0]
   * weex version： 0.19
   
   ## Expected behavior
   no Style flicker
   
   ## Screenshots
   see the file below,there is a video for this bug inside
   [file.zip](https://github.com/apache/incubator-weex/files/2692983/file.zip)
   
   ![image](https://user-images.githubusercontent.com/6964387/50194681-e4bb1180-0376-11e9-8088-a7c643dd5aa7.png)
   
   
   ## source code
   ```javascript
   <template>
       <div class="ui-btn">
           <div class="progressView" :style="progressStyle">
               <div class="progressInner"></div>
           </div>
       </div>
   </template>
   <style scoped lang="stylus">
       .ui-btn{
           width: 128px;
           height:60px;
           font-size: 24px;
           background-color: #ffffff;
           border-width: 1px;
           border-color: #888899;
           border-style: solid;
           border-radius: 30px;
           align-items: center;
           justify-content: center;
           background-image: none;
           opacity: 1;
       }
       .progressView{
           position: absolute;
           left:-1px;
           top:-1px;
           width: 10px;
           height:60px;
           overflow:hidden;
       }
   
       .progressInner{
           width: 128px;
           height:60px;
           border-radius: 30px;
           background-image: linear-gradient(to right,#FFD980,#E6BC5C);
       }
   
   </style>
   <script>
       export default {
           data () {
               return {
                   progress: 0,
               }
           },
           mounted () {
               setInterval(() => {
                   this.progress += 0.01;
               }, 1000);
           },
           computed: {
               progressStyle(){
                   let width = 128;
                   let progressWidth = this.progress * width;
   
                   if(weex.config.env.platform === 'Web'){
                       progressWidth = progressWidth / 2;
                   }
                   if(this.progress === 0){
                       progressWidth  = 0.1
                   }
                   return {
                       width : progressWidth + 'px'
                   }
               }
           }
       }
   
   </script>
   
   
   ```
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services