www.salesforce.com - “Social media” icons are displayed too close to the bottom edge

[softvision-oana-arbuzov]

URL: https://www.salesforce.com/services/overview/

Browser / Version: Firefox Nightly 67.0a1 (2019-01-30) Operating System: Windows 10 Pro Tested Another Browser: Yes

Problem type: Design is broken Description: “Social media” icons are displayed too close to the bottom edge Steps to Reproduce:

1. Navigate to https://www.salesforce.com/services/overview/
2. Scroll down to “See how Success Cloud has helped customers reach their goals.”
3. Observe social media icons.

Expected Behavior: Social media icons are displayed at a fair distance from the bottom edge.

Actual Behavior: Social media icons are displayed too close to the bottom edge.

Note

1. Not reproducible on Chrome 72.0.3626.76.
2. Screenshot attached.

Watchers: @softvision-oana-arbuzov @softvision-sergiulogigan @cipriansv

sv;

Browser Configuration

• None

From webcompat.com with ❤️

[wisniewskit]

It seems that this is because they are setting the height of the .thumbnail div (with the image and white background below it) differently in Chrome (style="height:463px") as opposed to Firefox (style="height:463px"). If I tell Firefox to use the same height, it looks the same.

According to Tinker Tester's element.style panel, this is the stack trace where it's being set:

    jQuery 4
        style
        bH.fn[b6]/<
        access
        b6
    equalizeHeights https://c1.sfdcstatic.com/etc/clientlibs/sfdc-www/clientlibs_base.min.03fe605589ef84c521b96b2e6f718af7.js:8062
    p https://c1.sfdcstatic.com/etc/clientlibs/sfdc-www/clientlibs_base.min.03fe605589ef84c521b96b2e6f718af7.js:8071
    jQuery 2
        dispatch
        handle

Which is this function (including its dependencies copy-pasted under it):

SfdcWwwBase.utils.equalizeHeights = function(k,l) {
  var j,h;
  if (typeof k==="string") {
    j=$(k)
  }else{
    if(typeof k==="object") {
      j=k
    }
  }
  j.height("");
  h=c(j);
  j.height(h);
  if(l){
    l()
  }
  return h
};

var c = function(h) {
 return d(h).height() || 0
}

var d = function(j) {
  var h=_.max(j,g);
  return typeof h === "object" ? $(h) : $([])
};

/* where d.height is the height method in jQuery 1.11.2 */

And indeed, Chrome and Firefox are returning different results for getBoundingClientRect().height on the same element here (when I remove the heights the script set), so there is clearly an interop issue at play. I'll try to make a minimal test-case.

[wisniewskit]

Ah, this is happening because Firefox collapses the margin-bottom on the row of icons, while Chrome does not. I've filed bz1524656 to see if and what can be done to resolve the interop difference on Firefox's end, and in the meantime Salesforce can fix this by just changing to using padding-bottom:20px instead of margin-bottom:20px on the .share-icon-row elements.

[miketaylr]

Thanks for digging in Tom!

I'm gonna mark this as severity-minor as it just relates to a small visual difference.

[wisniewskit]

It turns out that Chrome will be changing their layout engine soon and doing what Firefox does here, so Salesforce will likely have to adopt one of the fixes I've mentioned if they want their layout to remain the same.

[softvision-sergiulogigan]

The layout has changed, and the issue is no longer reproducible.

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.