Closed softvision-oana-arbuzov closed 4 years ago
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.
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.
Thanks for digging in Tom!
I'm gonna mark this as severity-minor as it just relates to a small visual difference.
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.
The layout has changed, and the issue is no longer reproducible.
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.
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:
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
Watchers: @softvision-oana-arbuzov @softvision-sergiulogigan @cipriansv
sv;
Browser Configuration
From webcompat.com with ❤️