Geek asks and answers

Facebook Like button moves and gets 1000px higher after returning to the page

We see strange behavior with the facebook button. The use case is as follows:

  • Upload page, facebook button, as in title.
  • Click the link, go to the new page, the facebook button will also appear on this page.
  • Click the back button.
  • Like the button on the previous page, it’s now moved 100 pixels to the right, taken at position: absoluteand now 1000 pixels high, with a transparent element that covers all the elements lower than the FB button on the page.
  • Click forward. The second page has the same error.

Here are some of the other weird behaviors that we see with him:

  • Inside the FB section there is a space that has only the height and width added to the style of the element. It starts at 200px x 1000px. Sometimes it suddenly switches to 0px x 0px - so far I do not see a rhyme or reason why.
  • Some of our pages have many buttons like FB. They all exhibit the same behavior.
  • On iPad, the FB button takes display: blockafter returning to the page.
+3
source share
1 answer

This is apparently a known issue.

https://developers.facebook.com/x/bugs/663421210369743/

We fixed this using the following:

.fb-like {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 1.5em;
  line-height: 30px;
  width: 81px !important;
  height: 22px !important;
  position: relative;
  z-index: 1002;
}
.fb-like > span {
  vertical-align: top !important;
  min-width: 81px !important;
  min-height: 22px !important;
}
.fb-like > span > iframe {
  min-width: 81px !important;
  min-height: 22px !important;
}
+5
source

More articles:


All Articles