Need "flash of unstyled content" fix please

My site https://bit.ly/2Nc8zIV - see the Buy Now button up top? That Buy Now button is loaded in an iframe and it takes a second to load the image. So I seemingly fixed it long ago by adding the same image to the wrapping anchor and then when the iframe loaded it would just drop over the already displayed image. However for whatever reason it changed its behavior now - and now it flashes ever so briefly when the iframe image loads. Anyone see an easy fix?

My guess as to why it flashes now is because when the iframe loads the image it is no longer inline (AKA identically positioned) with the pre-loaded image - it initially flashes over to the right 50px. That is why I added overflow hidden to the anchor. I thought position absolute on the anchor would remove it from flow so the iframe would load identically but that doesn’t seem to work. I assume I cant target the iframe so thats out.

Just tested - removing the preloaded image the iframe still loads over to the right initially. So it seems I may of answered my own problem - cant fix it unless I can target the iframe. But maybe you guys see a solution I don’t?

Thanks!

Why is the BIN button in an iframe? it just takes me to another page anyway. Why can’t you just put a link on the page?

I don’t see the flash. :sunglasses:

On my mobiles it only flashes with a refresh. On desktop on page load. For me at least

You can’t have an iframe as a descendant of an anchor as that is invalid.

You can just use a div as a stacking context (position:relative) and set the width and height to match the button dimensions. Then absolutely place the anchor with the background image into position and also absolutely place the iframe in the same space (note that the anchor and iframe would be separate non nested elements of course).

Although I’m not sure why you need an anchor as well as its only for a split second so you may as well place a background image on the div and absolutely place the iframe on top.

Thanks Paul I’ll play with your advice. That’s not any of my html - just copy and pasted from sellfy.

2 Likes

Copy and pasting the sellfy code… I’m thinking on what you said Paul. Why use a anchor and a iframe. I’m quite sure I could remove the iframe all together and just link to the big page. But what am I missing? There must be a reason for it. These are my thoughts lol.

I just did a live edit with my dev tools and deleted the iframe.
The anchor link took me to the sellfy page without an iframe. They both had the same link anyway.

It could have been coded by someone that didn’t realize that an anchor was all that they needed.

EDIT:
It looks like the iframe controls the background color behind $49 on mouseover
When I delete the iframe I loose the bg color on hover

You could fix that with a spite image on the anchor though

Or you can go with a CSS only button and eliminate both the image and iframe.
It’s even got the opaque overlay in there on hover.

button

The sellfy script is nesting the iframe in the anchor when the page loads.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS buy now button</title>
<style>
div {margin:1em;}
.buy a {
  display:inline-block; /*shrinkwrap it*/
  text-decoration:none;
  border:1px solid #009737;
  border-radius:4px;
  position:relative;
}
.buy span {
  display:inline-block;
  line-height:38px;
  vertical-align:middle;
  font-weight:700;
}
.buy a:hover b{
  opacity:1;
}
.buy span:nth-child(1){
  background:#00b140;
  color:#ffffff;
  border-radius:3px 0 0 3px;
  padding:0 10px;
  font-size:13px;
}
.buy span:nth-child(2){
  background:#ffffff;
  color:#111111;
  border-radius:0 3px 3px 0;
  padding:0 18px;
  font-size:14px;
}
.buy a b {
  position:absolute;
  width:100%;
  height:100%;
  left:0;top:0;
  border-radius:3px;
}
.buy a:hover b{
  background:rgba(204, 204, 204, 0.12);
}
</style>

</head>
<body>

<p>CSS button</p>
<div class="buy">
  <a href="https://sellfy.com/p/z2dN/" target="_blank" title="Download Property Management Forms Package">
    <span>Buy now</span><span>$49</span><b></b>
  </a>
</div>

<p>iframe image button</p>
<div id="buynow">
  <a href="https://sellfy.com/p/z2dN/" id="z2dN" class="sellfy-buy-button in-new-page" target="_blank" title="Download Property Management Forms Package">Buy now</a>
  <script type="text/javascript" src="https://sellfy.com/js/api_buttons.js"></script>
</div>

</body>
</html>
2 Likes

Hey Ray! Good stuff. Thank you for doing the leg work on that. So looking closer the iframe is not in the html. It’s inserted with the following script. I think its providing performance data maybe? If so I don’t want to remove it. If I display none the iframe or visibility hidden it (in order to go full css route) would that remove any data tracking that this script provides I wonder?

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0], today = new Date();
  if (d.getElementById(id)) { return; }
  js = d.createElement(s); js.id = id;
  js.src = 'https://sellfy.com/js/sdk.js?v=' + today.getFullYear()+''+today.getMonth()+''+today.getDate()+''+today.getHours();
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'sellfy-jssdk'));

Maybe opacity:0 would be better and then its still there but can’t be seen.

Yeah, and actually if you run that js.src url in your browser it takes you to the script that is actually building the iframe.

https://sellfy.com/js/sdk.js?v=

It looks like quite a bit of code that could be replaced with a simple anchor. I’ve got a slow connection right now (used all my high speed data already) and it took a while to get everything loaded for me since I was getting handshakes from your site and sellify.

It seems the more I look at it the more I find. I thought the iframe was just loading an image. I guess the image was coming from your site.

The iframe button is actually being built with display:table

I also noticed a piece of code somewhere that looked like it automatically updated the price, I suspect it follows the price you set at the sellify site.

Here is the core of the button code I pulled out of the iframe document. You can see it builds the button with inline-table and table-cell

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
html,body{
  margin: 0;
  padding: 0;
}
body{
  font-family: "Proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}
.sellfy-buy-button{
  background-color: #00b140;
  border-radius: 3px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, .15) inset;
  color: #fff;
  cursor: pointer;
  display: inline-table;
  font-size: 0;
  font-weight: bold;
  height: 38px;
  padding: 1px;
  table-layout: auto;
  text-align: left;
  opacity: 1;
  text-decoration: none;
  -moz-transition: 0.1s filter, 0.1s background-color, 0.1s opacity linear 0.4s;
  -o-transition: 0.1s filter, 0.1s background-color, 0.1s opacity linear 0.4s;
  -webkit-transition: 0.1s filter, 0.1s background-color, 0.1s opacity linear 0.4s;
  transition: 0.1s filter, 0.1s background-color, 0.1s opacity linear 0.4s;
  vertical-align: middle;
}
.sellfy-buy-button.loaded{
  opacity: 1;
}
.sellfy-buy-button.hover,
.sellfy-buy-button:hover{
  outline: none;
}
.sellfy-buy-button .sellfy-logo{
  display: table-cell;
  height: 18px;
  line-height: 1;
  padding: 10px;
  vertical-align: middle;
  width: 18px;
}
.sellfy-buy-button .sellfy-logo img{
  border: none;
}
.sellfy-buy-button .buy-now{
  display: table-cell;
  font-size: 13px;
  line-height: 1;
  padding: 0 10px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.sellfy-buy-button .free-download{
  width: auto;
}
.sellfy-buy-button .price{
  background-color: #FFF;
  border-radius: 0 2px 2px 0;
  box-shadow: -1px 0 0 0 rgba(0, 0, 0, .15);
  color: #111;
  display: table-cell;
  line-height: 1;
  min-width: 40px;
  padding: 0 10px;
  text-align: center;
  vertical-align: middle;
}
.sellfy-buy-button.hover,
.sellfy-buy-button:hover {
    filter: brightness(96%);
}
.sellfy-buy-button .price .container{
  display: block;
}
.sellfy-buy-button .price .price-current{
  display: block;
  font-size: 14px;
}
.sellfy-buy-button .price .price-old{
  display: block;
  font-size: 11px;
  font-weight: normal;
  margin-top: 1px;
  opacity: 0.5;
  text-decoration: line-through;
}

/*.fr_header, .__fr.__ed.fr_header { background-image: url(https://d12swbtw719y4s.cloudfront.net/images/JcgCOrd0/1rFunN1G3N2nqnDNHucr/60RSnj20Lv.jpeg); }.fr_main_background, .__fr.__ed.fr_main_background { background-color: rgb(244, 244, 244); }.fr_main_header, .__fr.__ed.fr_main_header { min-height: 350px; background-color: rgb(244, 244, 244); }.fr_overlay, .__fr.__ed.fr_overlay { display: block; }.fr_text_bright_center, .__fr.__ed.fr_text_bright_center { color: rgb(255, 255, 255); }.fr_download_header, .__fr.__ed.fr_download_header { background-image: url(https://sellfy.com/propmgmtforms/edit/); }.fr_navigation, .__fr.__ed.fr_navigation { background-color: rgb(255, 255, 255); }.fr_nav_item, .__fr.__ed.fr_nav_item { color: rgb(102, 102, 102); }.fr_nav_item_active, .__fr.__ed.fr_nav_item_active { color: rgb(102, 102, 102); border-color: rgb(102, 102, 102); }.fr_accent_background, .__fr.__ed.fr_accent_background { background-color: rgb(0, 177, 64); }.fr_accent_text, .__fr.__ed.fr_accent_text { color: rgb(0, 177, 64); }.fr_primary_button, .__fr.__ed.fr_primary_button { background-color: rgb(0, 177, 64); color: rgb(255, 255, 255); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; }.fr_secondary_button, .__fr.__ed.fr_secondary_button { border-color: rgb(0, 177, 64); color: rgb(0, 177, 64); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; }.fr_label_primary, .__fr.__ed.fr_label_primary { background-color: rgb(0, 177, 64); }
.sellfy-buy-button .price{
  border-radius: 0 3px 3px 0;
} */

</style>
</head>
<body>

<a href="https://sellfy.com/p/z2dN/" id="z2dN" class="sellfy-buy-button in-new-page" target="_blank" title="Download Property Management Forms Package">Buy now
  <div id="sellfy_buy_button" class="sellfy-buy-button fr_primary_button loaded">
    <div id="title" class="buy-now">
      Buy now
    </div>
    <div class="price">
      <span class="container">
        <span class="price-current">
          $49
        </span>
      </span>
    </div>
  </div>

  <script type="text/javascript">
    function addClass(el, className){
      if (el.classList) {
        el.classList.add(className);
      } else {
        el.className += ' ' + className;
      }
    }

    function removeClass(el, className){
      if (el.classList) {
        el.classList.remove(className);
      }
      else {
        el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
      }
    }

    function updateText(el, text){
      if(text !== ''){
        el.querySelector('#title').innerText = text;
      }

      window.parent.postMessage({
        name: name,
        event: 'sellfy.customButtonWidth',
        width: document.getElementById('sellfy_buy_button').scrollWidth
      }, '*');

      el.className += ' loaded';
    }

    function processEvent(event) {
      var btn = document.getElementById('sellfy_buy_button');

      if (event.data === 'sellfy.mouseover') {
        addClass(btn, 'hover');
      } else if (event.data === 'sellfy.mouseout') {
        removeClass(btn, 'hover');
      } else if (event.data && event.data.event === 'sellfy.custom-button-text') {
        updateText(btn, event.data.text);
      }
    }

    window.addEventListener('message', processEvent);
  </script>
</a>

</body>
</html>

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.