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

Strange line breaks on Firefox 91.8.0esr when Build History uses wbr within display: inline-flex (regression in 2.321)

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Minor Minor
    • core
    • Jenkins 2.332.1
      Mozilla Firefox 91.8.0esr
    • 2.349

      The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):

      <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a>
      

      and this CSS rule applies to it:

      .jenkins-table__link, .jenkins-table .sortheader {
          display: inline-flex;
      }
      

      Microsoft Edge 100.0.1185.29 renders it nicely:

      Mozilla Firefox 91.8.0esr however breaks the "Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx" part (before the first <wbr> tag) to two lines, and then renders the rest "/XXXXX-111_xxxxxxxxxxxxxxxxx" at the right side of that, even centering it vertically:

      I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow.

      If I disable display: inline-flex; in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr:

      Alternatively, if I keep the original CSS rule but replace each <wbr> with &#x200B;, then Firefox 91.8.0esr renders like this:

        1. after.png
          after.png
          30 kB
        2. before.png
          before.png
          35 kB
        3. firefox-91.8.0esr-ZWSP.png
          firefox-91.8.0esr-ZWSP.png
          14 kB
        4. firefox-91.8.0esr-without-inline-flex.png
          firefox-91.8.0esr-without-inline-flex.png
          14 kB
        5. firefox-91.8.0esr.png
          firefox-91.8.0esr.png
          16 kB
        6. edge-100.0.1185.29.png
          edge-100.0.1185.29.png
          18 kB

          [JENKINS-68205] Strange line breaks on Firefox 91.8.0esr when Build History uses wbr within display: inline-flex (regression in 2.321)

          Kalle Niemitalo created issue -
          Kalle Niemitalo made changes -
          Labels New: css
          Kalle Niemitalo made changes -
          Description Original: The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):

          {code:HTML}
          <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a>
          {code}

          and this CSS rule applies to it:

          {code:CSS}
          .jenkins-table__link, .jenkins-table .sortheader {
              display: inline-flex;
          }
          {code}

          Microsoft Edge 100.0.1185.29 renders it nicely:

          !edge-100.0.1185.29.png|thumbnail!

          Mozilla Firefox 91.8.0esr however breaks the part before the first {{<wbr>}} tag to two lines, and then renders the rest at the right side of that:

          !firefox-91.8.0esr.png|thumbnail!

          I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow.

          If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr:

          !firefox-91.8.0esr-without-inline-flex.png|thumbnail!

          Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&#x200B;}}, then Firefox 91.8.0esr renders like this:

          !firefox-91.8.0esr-ZWSP.png|thumbnail!
          New: The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):

          {code:HTML}
          <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a>
          {code}

          and this CSS rule applies to it:

          {code:CSS}
          .jenkins-table__link, .jenkins-table .sortheader {
              display: inline-flex;
          }
          {code}

          Microsoft Edge 100.0.1185.29 renders it nicely:

          !edge-100.0.1185.29.png|thumbnail!

          Mozilla Firefox 91.8.0esr however breaks the part before the first {{<wbr>}} tag to two lines, and then renders the rest at the right side of that:

          !firefox-91.8.0esr.png|thumbnail!

          I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow.

          If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr:

          !firefox-91.8.0esr-without-inline-flex.png|thumbnail!

          Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&amp;#x200B;}}, then Firefox 91.8.0esr renders like this:

          !firefox-91.8.0esr-ZWSP.png|thumbnail!
          Kalle Niemitalo made changes -
          Description Original: The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):

          {code:HTML}
          <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a>
          {code}

          and this CSS rule applies to it:

          {code:CSS}
          .jenkins-table__link, .jenkins-table .sortheader {
              display: inline-flex;
          }
          {code}

          Microsoft Edge 100.0.1185.29 renders it nicely:

          !edge-100.0.1185.29.png|thumbnail!

          Mozilla Firefox 91.8.0esr however breaks the part before the first {{<wbr>}} tag to two lines, and then renders the rest at the right side of that:

          !firefox-91.8.0esr.png|thumbnail!

          I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow.

          If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr:

          !firefox-91.8.0esr-without-inline-flex.png|thumbnail!

          Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&amp;#x200B;}}, then Firefox 91.8.0esr renders like this:

          !firefox-91.8.0esr-ZWSP.png|thumbnail!
          New: The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):

          {code:HTML}
          <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a>
          {code}

          and this CSS rule applies to it:

          {code:CSS}
          .jenkins-table__link, .jenkins-table .sortheader {
              display: inline-flex;
          }
          {code}

          Microsoft Edge 100.0.1185.29 renders it nicely:

          !edge-100.0.1185.29.png|thumbnail!

          Mozilla Firefox 91.8.0esr however breaks the "Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx" part (before the first {{<wbr>}} tag) to two lines, and then renders the rest "/XXXXX-111_xxxxxxxxxxxxxxxxx" at the right side of that:

          !firefox-91.8.0esr.png|thumbnail!

          I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow.

          If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr:

          !firefox-91.8.0esr-without-inline-flex.png|thumbnail!

          Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&amp;#x200B;}}, then Firefox 91.8.0esr renders like this:

          !firefox-91.8.0esr-ZWSP.png|thumbnail!
          Kalle Niemitalo made changes -
          Description Original: The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):

          {code:HTML}
          <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a>
          {code}

          and this CSS rule applies to it:

          {code:CSS}
          .jenkins-table__link, .jenkins-table .sortheader {
              display: inline-flex;
          }
          {code}

          Microsoft Edge 100.0.1185.29 renders it nicely:

          !edge-100.0.1185.29.png|thumbnail!

          Mozilla Firefox 91.8.0esr however breaks the "Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx" part (before the first {{<wbr>}} tag) to two lines, and then renders the rest "/XXXXX-111_xxxxxxxxxxxxxxxxx" at the right side of that:

          !firefox-91.8.0esr.png|thumbnail!

          I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow.

          If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr:

          !firefox-91.8.0esr-without-inline-flex.png|thumbnail!

          Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&amp;#x200B;}}, then Firefox 91.8.0esr renders like this:

          !firefox-91.8.0esr-ZWSP.png|thumbnail!
          New: The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):

          {code:HTML}
          <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a>
          {code}

          and this CSS rule applies to it:

          {code:CSS}
          .jenkins-table__link, .jenkins-table .sortheader {
              display: inline-flex;
          }
          {code}

          Microsoft Edge 100.0.1185.29 renders it nicely:

          !edge-100.0.1185.29.png|thumbnail!

          Mozilla Firefox 91.8.0esr however breaks the "Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx" part (before the first {{<wbr>}} tag) to two lines, and then renders the rest "/XXXXX-111_xxxxxxxxxxxxxxxxx" at the right side of that, even centering it vertically:

          !firefox-91.8.0esr.png|thumbnail!

          I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow.

          If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr:

          !firefox-91.8.0esr-without-inline-flex.png|thumbnail!

          Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&amp;#x200B;}}, then Firefox 91.8.0esr renders like this:

          !firefox-91.8.0esr-ZWSP.png|thumbnail!
          Kalle Niemitalo made changes -
          Summary Original: inline-flex wbr oddity on Build history page using Firefox 91.8.0esr New: Strange line breaks on Firefox 91.8.0esr when Build History uses wbr within display: inline-flex
          Basil Crow made changes -
          Labels Original: css New: css ux
          Basil Crow made changes -
          Labels Original: css ux New: regression ux
          Basil Crow made changes -
          Summary Original: Strange line breaks on Firefox 91.8.0esr when Build History uses wbr within display: inline-flex New: Strange line breaks on Firefox 91.8.0esr when Build History uses wbr within display: inline-flex (regression in 2.321)
          Basil Crow made changes -
          Link New: This issue is caused by JENKINS-68229 [ JENKINS-68229 ]
          Basil Crow made changes -
          Attachment New: after.png [ 57663 ]
          Attachment New: before.png [ 57664 ]

            felix_416 Feng-Yi Xue
            kon Kalle Niemitalo
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved: