Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4284

Tabbox is not scrollable under safari 9

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Normal
    • Resolution: Fixed
    • Affects Version/s: 8.6.1
    • Fix Version/s: 8.6.2
    • Component/s: Browser Issue
    • Security Level: Jimmy
    • Labels:
    • gh.sprint.customfield.default.name:
      ZK 8.6.2 S1

      Description

      Steps to Reproduce

      1. visit https://www.zkoss.org/zkdemo/tabbox/scrollable with iPad 2
      or any device with Safari 9 (see https://en.wikipedia.org/wiki/IOS_version_history)

      Current Result

      see attached video.

      • tabbox is not scrollable since it doesn't render left/right arrow button for scrolling.
      • it renders a label on a tab as ellipsis instead of a complete text.

      Expected Result

      tabbox is scrollable

      Debug Information

      Safari 12 has no such issue.

      Root Cause

      it's a Safari 9 flex bug, please see https://github.com/philipwalton/flexbugs#flexbug-1
      Safari fixed the bug after Safari 10 see https://bugs.webkit.org/show_bug.cgi?id=146020
      Reference: https://www.w3.org/TR/css-flexbox/#flex-common

      Workaround

      default flex set the flex items with flex-shrink: 1; , add flex:none; or flex-shrink: 0; in flex items will fix the problem.

      <style>
      .z-tabs-content .z-tab

      { flex: none; }

      </style>

        Attachments

          Activity

            People

            • Assignee:
              Leon03 Leon03
              Reporter:
              hawk hawk
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Time Tracking

                Estimated:
                Original Estimate - 4 hours
                4h
                Remaining:
                Time Spent - 2 hours, 30 minutes Remaining Estimate - 1 hour, 30 minutes
                1h 30m
                Logged:
                Time Spent - 2 hours, 30 minutes Remaining Estimate - 1 hour, 30 minutes
                2h 30m