Flashing browser scrollbars problem (Standalone test case included)

[mazzi]

Hi,

We are seeing an annoying issue in our app where, for certain browser window sizes, when we bring up a modal dialog the browser scrollbars start flashing nonstop. This behavior has been observed in the latest versions of Firefox, Chrome and IE11. It also happens regardless of which SmartGWT skin is being used. We would like to know if this is due to a bug in SmartGWT, and what is, if any the recommended workaround for this behavior. I have attached with this post a standalone test case that reproduces this problem, and that should hopefully help the reviewers better understand and trace down what the issue and the fix are. The test case is made up of a root VStack layout containing a top empty HLyout, and a main VLayout that contains the ‘Show’ button. To quickly observe this behavior using this test case, after you bring it up in a browser, you need to slowly adjust or resize the browser window until you notice both the horizontal and vertical scrollbars appearing, then click the Show button. Browser scrollbars start flashing once the modal dialog window is displayed. While investigating this issue, we noticed three things that seemed to influence this behavior.

1. The dialog modality setting. Making the dialog non-modal seems to eliminate this flashing behavior. But this option is a nonstarter for us as all our dialogs must be modal.
2. Using a VLyout instead of a VStack for the root canvas. This option also does not work well for us as it has a broad impact on all our app layouts.
3. Setting the height size of the main VLayout to 100%. The only issue with this option is that we’re not sure it really fixed the problem or just made it less likely to happen.

SmartGWT version used: SmartClient Version: v11.0p_2016-08-04/LGPL Development Only (built 2016-08-04)

Please let us know if you need any help reproducing this issue on your side. One thing we would like know once you get a chance to look at it and the associated test case, and confirm it, is Smart Client’s recommended workaround for this problem. This issue is having is having a big impact on our app as we are trying to target different form factors and different devices of varying sizes.

Thanks very much for your time and assistance.

Mike

public class MainEntryPoint implements EntryPoint {

   
    /**
     * The entry point method, called automatically by loading a module that
     * declares an implementing class as an entry-point
     */
    @Override
    public void onModuleLoad() {
        
        final Canvas helpCanvas = new Canvas();
        helpCanvas.setWidth100();
        helpCanvas.setDefaultWidth(300);  
        helpCanvas.setPadding(10);
        
        
        helpCanvas.setContents("<b>Severity 1</b> - Critical problem<br>System is unavailable in production or " +  
              "is corrupting data, and the error severely impacts the user's operations." +  
              "<br><br><b>Severity 2</b> - Major problem<br>An important function of the system " +  
              "is not available in production, and the user's operations are restricted." +  
              "<br><br><b>Severity 3</b> - Minor problem<br>Inability to use a function of the " +  
              "system occurs, but it does not seriously affect the user's operations.");
        
        final Window window = new Window();  
            //    window.setPlacement(PanelPlacement.FILLSCREEN);
                window.setIsModal(true);
                window.setShowModalMask(true);
                window.setWidth("65%");
                window.setHeight("50%");
                window.centerInPage();               
                window.setTitle("Window");
               
               window.setCanDragReposition(true);  
                window.setCanDragResize(false);  
                window.addItem(helpCanvas);
        
        IButton showButton = new IButton();
        showButton.setTitle("Show");  
        showButton.setWidth(100);  
        showButton.addClickHandler(new com.smartgwt.client.widgets.events.ClickHandler() {  
            @Override  
            public void onClick(com.smartgwt.client.widgets.events.ClickEvent event) {  
               
                
                window.show();
            }
        });
        
        VStack rootLayout = new VStack();
        rootLayout.setWidth("100%");
    //    rootLayout.setHeight("93%");
        rootLayout.setHeight("98%");
        
        // Top HLayout section
        HLayout mainHLayout = new HLayout();
        mainHLayout.setHeight(60);
        mainHLayout.setWidth("98%");
        
        // Main vlayout section
        final VLayout mainVLayout = new VLayout();  
     //   mainVLayout.setHeight("98%");
        
     //   mainVLayout.setHeight("83%"); // Another height value that also causes the flashing
        
        mainVLayout.setHeight("93%"); // A height value that causes the flashing
        mainVLayout.setWidth("98%");
        
        mainVLayout.setLayoutMargin(8);  
        
        HLayout btnLayout = new HLayout();
        btnLayout.setMembersMargin(20);
        btnLayout.setAlign(Alignment.LEFT);
        btnLayout.setDefaultLayoutAlign(VerticalAlignment.CENTER);
        btnLayout.addMember(showButton);
   
        mainVLayout.addMember(btnLayout);

        rootLayout.addMember(mainHLayout);
        rootLayout.addMember(mainVLayout);
        
        rootLayout.draw();
          
    }
}

<module>
     <!-- Inherit the core Web Toolkit stuff without a skin.                        -->
  <inherits name="com.smartgwt.SmartGwtNoScript"/>
 
  <!-- TODO: remove from production -->
  <!-- provides access to SmartGWT console for debugging, to start console enter javascript:isc.showConsole() in browser URL -->
  <inherits name="com.smartgwt.tools.SmartGwtToolsNoTheme"/>
 
  <inherits name="com.smartclient.theme.simplicity.SimplicityResources"/>
 
  <!--
  <inherits name="com.smartclient.theme.graphite.GraphiteResources"/>

 
  <inherits name="com.smartclient.theme.enterpriseblue.EnterpriseBlueResources"/>
  -->
 

    <!-- Inherit the default GWT style sheet. You can change -->
    <!-- the theme of your GWT application by uncommenting -->
    <!-- any one of the following lines. -->
    <!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
    <!-- <inherits name="com.google.gwt.user.theme.chrome.Chrome"/> -->
    <!-- <inherits name="com.google.gwt.user.theme.dark.Dark"/> -->

    <entry-point class="test.client.MainEntryPoint"/>
    
    <!-- Do not define servlets here, use web.xml -->
</module>

<html>
    <head>
        <meta name='gwt:module' content='test.Main=test.Main'>
        <title>Main</title>
        <script type="text/javascript"  src="test.Main/test.Main.nocache.js"></script>
        
        <script type="text/javascript" src='test.Main/sc/modules/ISC_Core.js'></script>
     <script type="text/javascript" src='test.Main/sc/modules/ISC_Foundation.js'></script>
     <script type="text/javascript" src='test.Main/sc/modules/ISC_Containers.js'></script>
     <script type="text/javascript" src='test.Main/sc/modules/ISC_Grids.js'></script>
     <script type="text/javascript" src='test.Main/sc/modules/ISC_Forms.js'></script>
     <script type="text/javascript" src='test.Main/sc/modules/ISC_RichTextEditor.js'></script>
     <script type="text/javascript" src='test.Main/sc/modules/ISC_DataBinding.js'></script>
     <script type="text/javascript" src='test.Main/sc/modules/ISC_Calendar.js'></script>
      
     
      <script type="text/javascript" src='test.Main/sc/skins/Simplicity/load_skin.js'></script>
     
      <script>       
         isc.Canvas.addProperties({ showCustomScrollbars:true });
     </script>
      
    </head>
    <body>
        <!--
        <iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
        -->
    </body>
</html>

[mazzi]

Hi,

Does anyone at Isomorphic have an update on this issue. We're kind of stuck here. As it turned out after doing further testing, solution #3 (setting the height to 100%), as I suspected is not really a solution. The flashing issue still happens there too. Have you at least been able to reproduce it in house? If you guys need help reproducing it, I'd be more than happy to help. Also if you have any suggestions for workarounds, I'd love to hear them.

Thanks,
Mike

[Isomorphic]

We've reproduced the problem, but it's not going to be looked at for a while because we're working through issues from customers with Support plans.

A quick workaround would be to use the Canvas.showCustomScrollbars to switch over to using our synthetic scrollbars instead of the browser native ones. The native scrollbars are generally quite buggy and are almost certainly at the root of this problem.

[mazzi]

Hi Isomorphic,

Thanks very much for the feedback. I'm glad you were to reproduce it on your side. With regard to the Canvas.showCustomScrollbars setting, I don't know if you noticed, but I do have that set in both the sample that I supplied, and our internal app using the following script block in the app html page:

 
  <script>                 isc.Canvas.addProperties({ showCustomScrollbars:true });  </script>

This setting does seem to have an effect on internal canvases and dialog scroll bars but not on the actual browser' scroll bars themselves. Is there another property that I am not aware of that I need to set for that to happen? Thanks again, Mike

[Isomorphic]

The top-level browser scrollbars are in fact the buggiest of all. To get rid of those, set overflow:"hidden" on the <body> element. If you need full-page scrolling, a VStack with overflow:"auto" does that - there wouldn't be a need to switch to a VLayout if you were thinking that would be required.

[PhoenixClearwater]

SmartClient Version: v11.1p_2017-12-02/LGPL Development Only (built 2017-12-02).
SmartGWT Version: 6.1-p20171202.
Browsers: All (IE 11, FF 57, Chrome 64 specifically)
Themes: Enterprise or Tahoe

Running the code in the original post we are still able to reproduce this issue. The specific issue we have is a little harder to reproduce but behaves similarly to the example code. Is there any ETA on when work for this will get prioritized?

[Isomorphic]

This was originally not reproducible in any skin except Simplicity, and we changed the skin default in Simplicity so it is not reproducible there either anymore. Most likely, you are not using a default skin or have introduced additional CSS, so you are creating a similar problem in a new way. If so, and you still think there is a framework bug here, let us know what additional settings are required to reproduce the issue.