Review Board 1.7.2


Fix for #447: breadcrumb CSS arrow in Webkit

Review Request #13 - Created Feb. 16, 2013 and updated

samer
Reviewers
vjrj
kune
Attempting to solve issue #447. 

After many attempts and many searches, it seems the best way to do it is with a pseudoelement (before/after) and a second triangle for the shadow:
http://jsfiddle.net/s_a_m/WKEfC/3/

Issues:
* The color is not gradual, but I think it's fine. 
* The triangle is also moved from its original position 1px, as for some reason I dont manage to make it work otherwise.
* IE6 and IE7 don't support pseudoelements.

It shows ok in Firefox and Chromium, in Ubuntu 12.04.
Tested manually on local server 
Total:
1
Open:
1
Resolved:
0
Dropped:
0
Status:
From:
Review request changed
Updated (Feb. 16, 2013, 10:28 p.m.)
  • Attempting to solve issue #447. 
    
    After many attempts and many searches, it seems the best way to do it is with a pseudoelement (before/after) and a second triangle for the shadow:
    http://jsfiddle.net/s_a_m/WKEfC/3/
    
    Issues:
    * The color is not gradual, but I think it's fine. 
    * The triangle is also moved from its original position 1px, as for some reason I dont manage to make it work otherwise.
    * IE6 and IE7 don't support pseudoelements.

    Attempting to solve issue #447. 
    
    After many attempts and many searches, it seems the best way to do it is with a pseudoelement (before/after) and a second triangle for the shadow:
    http://jsfiddle.net/s_a_m/WKEfC/3/
    
    Issues:
    * The color is not gradual, but I think it's fine. 
    * The triangle is also moved from its original position 1px, as for some reason I dont manage to make it work otherwise.
    * IE6 and IE7 don't support pseudoelements.
    
    It shows ok in Firefox and Chromium, in Ubuntu 12.04.
Posted (Feb. 20, 2013, 2:38 p.m.)

   

  
this color change is needed? Because now I see in FF this black so its different than the rest of the button border. 
  1. You are right, I changed it to #AAAAAA to respect the style of the other border color (leaving it as #DDDDDD would make the line disappear, as both triangles would have the same color).
You can fix the padding issue with:

button.k-button {
  padding: 0 2px;
  -webkit-padding-start: 5px;
  -webkit-padding-before: 1px;
}

instead of:

button.k-button {
  padding: 0 2px; 
}

in kune-custom-common.css

Please see the other comment.
  1. I don't get it. Your proposed change had no visual effect at all :-/  Checking with Chromium Developer Tools, both -webkit-padding lines appear as working (uncrossed) but they show no difference with respect to removing them both. I made some experimentation to fix this with no success. 
    
    Another issue: different k-button-arrows (in the same breadcrumb) show different border, although using Chromium Developer Tools all show identical computed style. (?)