Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-33175

In Firefox and IE, the arrow lines move when scrolling the page, breaking the connections

    Details

    • Type: Bug
    • Status: Resolved (View Workflow)
    • Priority: Minor
    • Resolution: Fixed
    • Labels:
      None
    • Environment:
      Jenkins 1.650
      Delivery Pipeline Plugin 0.9.8
      Operating System: Any
      Web Browser: IE 11 / Firefox 44 (Works in Chrome 48)
    • Similar Issues:

      Description

      Problem description

      The problem is the following: On Internet Explorer or Firefox, when I load the deployment pipeline view, everything is connected correctly. You can see this in the screenshot "noscroll.png".

      If I scroll the page, at first, everything is still connected correctly, that is, the arrows scroll along with the page.

      However, after the update period expires, the arrows move so they go into the same absolute screen position in which they were before, which is not the correct position, since the cells in the pipeline have moved, so they are in a different absolute position. You can see this in the screenshot "scroll.png".

      In informal language, if I point a finger to an arrow in the screen, then scroll, the arrows stay fixed where my finger is, but the pipeline cells move according to my scroll.

      Additional information

      The problem has been present since I installed the plugin recently. I'm using the latest available version of both Jenkins and this plugin.

      The problem can NOT be reproduced in full screen view. This works correctly.

      This problem can not be reproduced in Chrome.

      As far as I know, I am not using jQuery UI. I can not see the plugin installed on my Jenkins install, nor any request which seems related to it, nor is jQuery.ui defined in Javascript.

      The problem seems superficially similar to the following problem: https://groups.google.com/forum/#!topic/jsplumb/D2ghz7tV4m8

      Plugins

      This is the full list of plugins I have installed (not including dependencies). All updated to the latest version:

      Copy Artifact Plugin 1.37
      CVS Plug-in 2.12
      Delivery Pipeline Plugin 0.9.8
      Email Extension Plugin 2.41.3
      Job Generator 1.22
      MSBuild Plugin 1.25
      MSTest plugin 0.19
      Nested View Plugin 1.14
      Node and Label parameter plugin 1.7.1
      Node Iterator API Plugin 1.5
      Role-based Authorization Strategy 2.2.0
      Self-Organizing Swarm Plug-in Modules 2.0
      SonarQube Plugin 2.3
      SSH Slaves plugin 1.10
      Throttle Concurrent Builds Plug-in 1.8.4
      Translation Assistance plugin 1.12
      VSTest Runner plugin 1.0.4

      NOTE: The delivery pipeline view I am creating is NOT inside a nested view.

      If I can gather enough time, I will set up a clean install to see if I can reproduce the problem, and install the plugins one by one to see if one breaks the page, since I expect that this issue would already be reported if it happened on a common setup.

        Attachments

        1. After-Firefox.png
          After-Firefox.png
          79 kB
        2. After-IE.png
          After-IE.png
          88 kB
        3. Before-Firefox.png
          Before-Firefox.png
          107 kB
        4. Before-IE.png
          Before-IE.png
          86 kB
        5. noscroll.png
          noscroll.png
          58 kB
        6. scroll.png
          scroll.png
          49 kB

          Activity

          Hide
          jbruguerapresenceco Joan Bruguera added a comment -

          I have set up a new Jenkins instance on my machine (probably irrelevant, but Windows 8.1 Pro), updated the default plugins to the latest version, installed the latest delivery pipeline plugin available, created two jobs, created a delivery pipeline, and I can reproduce the bug. So the bug seems to happen in a totally clean environment.

          Show
          jbruguerapresenceco Joan Bruguera added a comment - I have set up a new Jenkins instance on my machine (probably irrelevant, but Windows 8.1 Pro), updated the default plugins to the latest version, installed the latest delivery pipeline plugin available, created two jobs, created a delivery pipeline, and I can reproduce the bug. So the bug seems to happen in a totally clean environment.
          Hide
          jbruguerapresenceco Joan Bruguera added a comment -

          I found a partial workaround: With the style sheet editor, remove the "position:relative" property of the HTML node from the Jenkins style.css file. This will cause other elements on the page to become dislocated, but the arrows will stay in place.

          A quick Google search reveals that this is indeed a common problem with jPlumb: https://www.google.es/search?q=jsplumb+position:relative

          Show
          jbruguerapresenceco Joan Bruguera added a comment - I found a partial workaround: With the style sheet editor, remove the "position:relative" property of the HTML node from the Jenkins style.css file. This will cause other elements on the page to become dislocated, but the arrows will stay in place. A quick Google search reveals that this is indeed a common problem with jPlumb: https://www.google.es/search?q=jsplumb+position:relative
          Hide
          jbruguerapresenceco Joan Bruguera added a comment -

          It appears that this issue has got some work on new versions of jsPlumb.

          I tried to upgrade from 1.3.16 to 1.7.10 (need to change the jsPlumb JS file + in pipe.js, change the line that says:

          endpoint: ["Blank"]

          to

          endpoint: "Blank"

          ), and the funny thing is that this fixes it in Firefox, but breaks Chrome and IE stays broken, probably because of the need to specify a container...

          Show
          jbruguerapresenceco Joan Bruguera added a comment - It appears that this issue has got some work on new versions of jsPlumb. I tried to upgrade from 1.3.16 to 1.7.10 (need to change the jsPlumb JS file + in pipe.js, change the line that says: endpoint: ["Blank"] to endpoint: "Blank" ), and the funny thing is that this fixes it in Firefox, but breaks Chrome and IE stays broken, probably because of the need to specify a container...
          Hide
          jbruguerapresenceco Joan Bruguera added a comment -

          Settting:

          plumb.setContainer(Q("#page-body"));

          Just after the call to reset() fixes both Firefox or Chrome, but IE stays broken... any idea from someone with more experience with jsPlumb?

          Show
          jbruguerapresenceco Joan Bruguera added a comment - Settting: plumb.setContainer(Q("#page-body")); Just after the call to reset() fixes both Firefox or Chrome, but IE stays broken... any idea from someone with more experience with jsPlumb?
          Hide
          tommysdk Tommy Tynjä added a comment -

          Thank you for the troubleshooting and very detailed description of this issue.

          Show
          tommysdk Tommy Tynjä added a comment - Thank you for the troubleshooting and very detailed description of this issue.
          Hide
          dawidmalina Dawid Malinowski added a comment -

          I have exactly the same issue with latest lts jenkins.

          Show
          dawidmalina Dawid Malinowski added a comment - I have exactly the same issue with latest lts jenkins.
          Hide
          pskumar448 Suresh Kumar added a comment -

          PR for this issue
          https://github.com/Diabol/delivery-pipeline-plugin/pull/176

          Before in firefox

          After fix in firefox

          Before in IE

          After fix in IE

          Show
          pskumar448 Suresh Kumar added a comment - PR for this issue https://github.com/Diabol/delivery-pipeline-plugin/pull/176 Before in firefox After fix in firefox Before in IE After fix in IE
          Hide
          tommysdk Tommy Tynjä added a comment -

          Fix verified on both IE and Firefox.

          Merged to master.
          Commit: f66dec06da351fda6e1a54c3ae3a35fbf5dfd380

          Show
          tommysdk Tommy Tynjä added a comment - Fix verified on both IE and Firefox. Merged to master. Commit: f66dec06da351fda6e1a54c3ae3a35fbf5dfd380

            People

            • Assignee:
              pskumar448 Suresh Kumar
              Reporter:
              jbruguerapresenceco Joan Bruguera
            • Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: