Bug 1309522

Summary: Username and documentation overlaps with OPENSHIFT ORIGIN logo on /console page for IE11
Product: OKD Reporter: Yadan Pei <yapei>
Component: Management ConsoleAssignee: Robb Hamilton <rhamilto>
Status: CLOSED CURRENTRELEASE QA Contact: Yadan Pei <yapei>
Severity: low Docs Contact:
Priority: medium    
Version: 3.xCC: aos-bugs, mmccomas
Target Milestone: ---   
Target Release: ---   
Hardware: Unspecified   
OS: Unspecified   
Whiteboard:
Fixed In Version: Doc Type: Bug Fix
Doc Text:
Story Points: ---
Clone Of: Environment:
Last Closed: 2016-05-12 17:14:53 UTC Type: Bug
Regression: --- Mount Type: ---
Documentation: --- CRM:
Verified Versions: Category: ---
oVirt Team: --- RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: --- Target Upstream Version:
Attachments:
Description Flags
IE11Console
none
IE11HomeLink
none
IE11Overlap none

Description Yadan Pei 2016-02-18 02:23:15 UTC 
Description of problem:
On IE11, when open /console page,user-dropdown element and documentation dropdown overlaps with OPENSHIFT ORIGIN logo on the left upper corner

Version-Release number of selected component (if applicable):
devenv-rhel7_3449
IE11

How reproducible:
Always

Steps to Reproduce:
1.Login to openshift web console

Actual results:
1.username and documentation overlaps with ORIGIN logo on /console page, refer to attachment

Expected results:
1. /console page should display well

Additional info:
Firefox44, Chrome47, Edge25, Safari9 works fine
Comment 1 Yadan Pei 2016-02-18 02:23:45 UTC 
Created attachment 1128124 [details]
IE11Console
Comment 2 Yadan Pei 2016-02-18 02:24:26 UTC 
Created attachment 1128125 [details]
IE11HomeLink
Comment 3 Robb Hamilton 2016-02-18 19:08:49 UTC 
Ya, I am unable to reproduce this bug in IE11.  I can, however, reproduce it in IE10.  Can you confirm that you're able to reproduce in IE11?
Comment 4 Yadan Pei 2016-02-19 03:35:53 UTC 
Created attachment 1128408 [details]
IE11Overlap
Comment 5 Yadan Pei 2016-02-19 03:36:18 UTC 
Add a screenshot to show what happens on my side
Comment 6 Robb Hamilton 2016-02-19 13:49:17 UTC 
Ah ha!  This bug is occurring because the CSS builds are different.

CSS served over port 8443:

@media (min-width: 768px) {
  .components .components-panel .component-block .component.meta-data {
    -moz-flex: 1 1 0%;
    flex: 1 1 0%;
  }
}

CSS served over port 9000:

@media (min-width:768px){.components .components-panel .component-block .component.meta-data{-webkit-flex:1 1 0;-moz-flex:1 1 0;-ms-flex:1 1 0;flex:1 1 0}}

Both are problematic.  8443 is missing the additional prefixed values.  The latter is missing the "%" unit declarations required to overcome an IE10-11 bug (see https://github.com/philipwalton/flexbugs#workaround-3).  

Jessica, I've yet to fully understand the Gruntfile.  Can you help?
Comment 7 Robb Hamilton 2016-02-19 22:05:49 UTC 
https://github.com/openshift/origin/pull/7475 should resolve this bug.
Comment 8 Yadan Pei 2016-03-01 05:53:11 UTC 
checked against devenv-rhel7_3568, issue is fixed

move to verified