css - إي و إدج فليكسبوكس علة؟



css3 internet-explorer (1)

لقد لاحظت وجود شذوذ في الحافة و إي عند استخدام فليكسبوكس مع أعمدة التمرير إلى جانب التمرير الأفقي. يوضح كوديبن التالي الوظائف الصحيحة في كروم و فيريفوكس؛ ومع ذلك، هناك شريط التمرير اضافية على حق جدا من الرأي لتجاوز عمودي طفيف (ارتفاع شريط التمرير الأفقي) التي توجد فقط في إي 11 و إدج:

الأصلي كوديبن مثال

أتش تي أم أل الخام كمرجع:

<body>
  <div class="app-master">
    <div class="app-sidebar-spacer">

    </div>
    <div class="app-content">
      <div class="app-header">
        <div class="ui secondary small menu">
          <a class="right item">
            <div>
              <span>happy text</span>
            </div>
          </a>
        </div>
      </div>
      <div class="app-work-zone">

        <div class="app-zone-content">
          <div class="ui segment app-zone-segment">

          </div>
        </div>
        <div class="app-zone-buffer">
        </div>

        <div class="app-zone-content">
          <div class="ui segment app-zone-segment">

            <div>
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
              ip"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              sum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
              ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
              ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

            </div>
          </div>
        </div>
        <div class="app-zone-buffer">
        </div>

        <div class="app-zone-content">
          <div class="ui segment app-zone-segment">

          </div>
        </div>
        <div class="app-zone-buffer">
        </div>

      </div>
    </div>
  </div>
</body>

كس الخام كمرجع:

 html,
 body {
   height: 100%;
   margin: 0;
   min-height: 100%;
   padding: 0;
 }

 .app-master {
   display: flex;
   flex-direction: row;
   height: 100%;
 }

 .app-sidebar-spacer {
   flex: 0 0 215px;
   background-color: #2959a5;
 }

 .app-content {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   overflow-x: auto; 
 }

 .app-header {
   min-height: 43px;
 }

 .app-header>.ui.menu {
   width: 100%;
 }

 .app-work-zone {
   flex: 1 1 auto;
   display: flex;
   flex-direction: row;
   min-height: 0;
 }

 .app-zone-content {
   flex: 1 1 0;
   min-width: 600px;
 }

 .app-zone-buffer {
   width: 2px;
   text-align: center;
 }

 .app-zone-segment {
   height: 100%;
   overflow-y: auto;
 }

ملاحظات:

  1. لدي دلالي-أوي تحميل في كوديبن لتصميم الأساسية، ولكن تم تطوير تخطيط باستخدام فليكسبوكس النقي (وليس نظام الشبكة الدلالية).
  2. يستخدم دلالي الدلالي بالفعل المعتاد، لذلك يتم إيقاف تشغيله في كس كوديبن.
  3. في كوديبن لدي "أوتوبريفيكسر" قيد التشغيل.
  4. عند العرض في إي، اضبط ارتفاع نافذة المعاينة، وسيظهر شريط التمرير الرأسي في نافذة المعاينة فجأة التمرير.
  5. كل من الطبقات المخصصة بلدي مسبوقة مع "app-".

وفيما يلي صور لما يبدو أن التنفيذ العملي لهذا المفهوم من قبل الناس في أسانا. ومع ذلك، أنا تكافح لفهم التنفيذ.

صورة 1) مع انهار النافذة مما أدى إلى التمرير الأفقي الصحيح في الحافة، أي محتوى مخفي في الجزء السفلي من الشاشة، وليس شريط التمرير غريبة في الجانب الأيسر جدا من الرأي:

صورة 2) مع توسيع نافذة (وليس التمرير الأفقي في الحافة لإثبات أي محتوى كان مخفيا عندما التمرير الأفقي كان في الواقع):

لذلك، هل هذا في الواقع خلل في إي والحافة، أو هل تنفيذ وظيفية على ما يبدو من قبل أسانا تثبت العمل حولها؟

تحرير 1) إضافة المزيد من وصف متعمق من الشذوذ.

تحرير 2) إضافة رابط كوديبن تحديث لتتبع التقدم عبر المتصفح.

تحرير 3) كوديبن النهائي تحديثها مع الخارقة وظيفية. يجب أن تبدو الوظيفة الآن متطابقة عبر IE11، إدج، كروم، و فف. قائمة الإختراق وظيفية كاملة هي:

@supports (-ms-ime-align: auto) and (not (object-fit: cover)) {
  .app-content {
    overflow-x: scroll; 
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  .app-content {
    overflow-x: scroll; 
  }
}

يعيد استعلام الوسائط التالي أوفيرفلو-x إلى السيارات في المتصفحات التي تم تعيينها على التمرير (انظر الخارقة أعلى من هذا واحد فقط) عندما يكون عرض المتصفح أكبر من 825 بكسل. هذا الرقم مشتق من 225 بكسل المستخدمة في الجانب الأيسر من الملاحة، والحد الأدنى 200 بكسل المستخدمة لكل عنصر فليكسبوكس على يمين التنقل الجانبي. يمنع هذا شريط التمرير الأفقي الغريب في IE11 و إدج عندما يكون عرض المتصفح أكبر من 825 بكسل.

@media (min-width: 825px) {
  .app-content {
    overflow-x: auto;
  }
}

النهائي (تحديث مع الخارقة الوظيفية) كوديبن مثال


ومن الواضح أن هذا خطأ (لم يتم العثور على أي تقرير الشوائب حتى الآن وسوف تحدث عندما أفعل).

لقد اختبرت هذا مع حافة على ويندوز 10 سقوط تحديث المبدعين الإصدار (ميكروسوفت إيدجيتمل 16)، والآن ثابت والعمل كما ينبغي.

هنا آخر آخر عن نفس المشكلة، حيث الحل واحد ل إي هو استخدام scroll بدلا من auto ( overflow-x: scroll )

تحديث استنادا إلى تعليق

هذا هو محاولة للعثور على كس القائم على الإختراق الذي سيتم الكشف عن إي 11 و إدج 12-15.

يبدو أن هذا الاختراق إي 11 كس يعمل بشكل صحيح:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  .app-content {
    overflow-x: scroll; 
  }
}

فور إدج يظهر هذا الاختراق كس ثبت للعمل:

يبدو أن الإختراق التالي يعمل لإيجاد الحافة:

@supports (-ms-ime-align: auto) {
  .app-content {
    overflow-x: scroll; 
  }
}

على الرغم من أن هذا أيضا قبض على الحافة 16، ولكن هنا وصلنا الحظ كما حافة 16 وأضاف دعم ل object-fit

لذلك ببساطة عن طريق التحقق من كل من (-ms-ime-align: auto) و (not (object-fit: cover)) ، يجب أن نكون قادرين على الواقع متميز حافة 12-15 من 16

@supports (-ms-ime-align: auto) and (not (object-fit: cover)) {
  .app-content {
    overflow-x: scroll; 
  }
}

كما لوحظ، يبدو أن ميكروسوفت تتحرك لإزالة العديد من الخصائص -ms ممكن في المستقبل مس الحافة، على الرغم من أننا لا تمانع، ونحن نريد لاستهداف الإصدارات القديمة التي لا تزال لديها

لقد اختبرت أعلاه 2 الخارقة كس مع النجاح في إي 11 و إدج 16 باستخدام هذا كوديبن:

إذا وجد أي شخص هذا لا يعمل على إصدار حافة محددة، واسمحوا لي أن أعرف حتى أتمكن من الحفاظ على هذا المنصب حتى الآن.

بالنسبة لك الذين يفضلون استخدام جافا سكريبت، وهنا مشاركة مع بعض القراءة مثيرة للاهتمام:





microsoft-edge