Trouble with font and color CSS directives with iFrame

So we've noticed there are font and coulor issues with the placeholders on all safari-based browsers. Chrome works fine (or perhaps has a built-in mechanism to recover from unreadable CSS).

 

This is our form for safari (you'll notice font and colour for the first 3 fields controlled by the iFrame do not match; the other 3 are ours):

 

Screen Shot 2019-07-16 at 5.31.29 PM.png

 

This is our form for chrome (and firefox):

 

Screen Shot 2019-07-16 at 5.31.23 PM.png

 

We pass the following CSS to the iFrame (encoded):

 

input_css = %(
      background-color: #F6F7FB;
      font-family: Roboto;
      display: block;
      float: inherit;
      font-size: 16px;
      font-weight: 400;
      height: 40px;
      width: 100%;
      z-index: inherit;
      margin-bottom: 10px !important;
      border: 1px solid #e2e8ed !important;
      border-radius: 5px;
      padding: 10px 10px;
      outline: none;
      &::placeholder {
        color: #757575 !important;
      }
    )

 

And the result in the head of the returned iFrame is this:

Screen Shot 2019-07-16 at 6.26.21 PM.png

 

you'll notice the brackets surrounding the placeholder directives have been replaced by underscores. Also, the Roboto font directive is present but still completely ignored by the browser.

 

Any ideas?

  • MichelJam
    Essentially, since we've received no responses on this topic, we went ahead and did the following:

    - We used default fonts (Helvetica) which caused the directive to be accepted
    - We changed the placeholder colour of our own fields based on whether this was being displayed with Safari-based browsers or not (because there was no way to get the placeholder colour changed at the Moneris level).
  • RR_Moneris

    In reply to MichelJam:

    Hi there we're sorry to have missed this. Im not seeing the screen shots that you included there. Are you able to send this to eProducts@moneris.com? Also the CSS you have above, where are you passing that? In the css_input_label parameter? If you send screen shots to eProducts can you reference this conversation or my username RR_moneris.