Safari JS innerHTML bug/error

Question

I have a strange problem in a very simple form validation script. Using Chrome and Firefox there is no problem, but using safari the innerHTML of my <p> doesn't change correctly. The second problem is that I can't show it in a snippet because Snippets are too small. If a user first types an @ then a number and removes the number again, i got a mixed error message. (error message 3 and the second line of message 6). If I simply rescale the safari window by hand, the second line disappears. The same happens with the combination of a / and a number or a . and a number. Like you can see in the code.

Preview of the website: Preview

To produce the error/bug i did this problem in third img in the green box: Fill in an @ Add a number Remove the Number

This is my HTML:

<h3 id="forms">Forms</h3>
<div class="forms">
    <form>
        <div class="input"><input placeholder="name" name="name" type="text" oninput="checkname(this.id)" id="name"><div><p id="namereaction" class="reaction"></p></div></div>
        <div class="input"><input placeholder="firstname" name="name" type="text" oninput="checkname(this.id)" id="firstname"><div><p id="firstnamereaction" class="reaction"></p></div></div>
        <div class="input"><input placeholder="mail" name="mail" type="email" oninput="checkmail()" id="mail"><div><p id="mailreaction" class="reaction"></p></div></div>
        <div class="input"><textarea name="text" id="textarea"></textarea><div id="textreactionbox"><p id="textareareaction" class="reaction"></p></div></div>
        <div class="input"><input type="submit" name="submit" value="submit"></div>
    </form>
</div>

And my JS:

function checkname(id){
    var error="";
    var value = document.getElementById(id).value;
    if(value.length<1){
        error = "Please fill in your (first)name.";
    }
    if(value.length>50){
        error = "Please fill in your (first)name. Your name is to long.";
    }
    if (value.indexOf("@") > -1 ) {
        error = "I think you are filling in your emailadress";
    }
    if (value.indexOf(".") > -1 ) {
        error = "Please check your (first)name, most names don't have a '.'.";
    }
    if (value.indexOf("/") > -1 ) {
        error = "Please check your (first)name, most names don't have a '/'.";
    }
    var matches = value.match(/\d+/g);
    if (matches != null) {
        error = "Please check your (first)name, we are all people, our (first)name doesn't contain a number.";
    }
    if(error.length>1){
        document.getElementById(id+"reaction").innerHTML=error;
    }else{
        document.getElementById(id+"reaction").innerHTML="";
    }
}

Using a Snippet it works on my mac, but in a normal website it doesn't work. I have the latest version on my Macbook Pro. — North-Wind, Sep 11 '17 at 15:44
But how can we help you without the snippet with the problem? — sergdenisov, Sep 11 '17 at 16:08
If it doesn't work in a normal website but work in a snippet (I've actually tried this on a normal website with all the code you've supplied and it works well), then it must mean that you have not supplied all your code to us. — Nelson Yeung, Sep 11 '17 at 16:18
Ok, I will add a preview of the site : [link](http://www.north-wind.be/sites/templates/onepage-3/). On my computer I still get the same problem like i have explained in my question. — North-Wind, Sep 12 '17 at 17:19

score 1 · Accepted Answer · answered Sep 12 '17 at 21:10

It seems like a Safari's render bug because I can reproduce it only in Safari with:

The specific custom font (Aqua, on other custom font it isn't reproducible);
The specific block size (when there are 2 lines of text).

Chrome and Firefox don't really load the font because of CORS problems:

But Safari does, you can check it out on this JSFiddle.

This snippet below only for history because that particular font on your site available only by HTTP (but SO snippets need HTTPS):

function checkname(id) {
  var error = "";
  var value = document.getElementById(id).value;
  if (value.length < 1) {
    error = "Please fill in your (first)name.";
  }
  if (value.length > 50) {
    error = "Please fill in your (first)name. Your name is to long.";
  }
  if (value.indexOf("@") > -1) {
    error = "I think you are filling in your emailadress";
  }
  if (value.indexOf(".") > -1) {
    error = "Please check your (first)name, most names don't have a '.'.";
  }
  if (value.indexOf("/") > -1) {
    error = "Please check your (first)name, most names don't have a '/'.";
  }
  var matches = value.match(/\d+/g);
  if (matches != null) {
    error = "Please check your (first)name, we are all people, our (first)name doesn't contain a number.";
  }
  if (error.length > 1) {
    document.getElementById(id + "reaction").innerHTML = error;
  } else {
    document.getElementById(id + "reaction").innerHTML = "";
  }
}

@font-face {
  font-family: "Aqua";
  src: url(http://north-wind.be/css/aqua.ttf) format("truetype");
}

.input {
  width: 100%;
  overflow: auto;
  margin: 24px auto;
  font-family: Aqua, Arial;
}

.input input[type=text],
.input input[type=email] {
  border: 1pt solid limegreen;
  width: 150px;
  border-radius: 8px 0px 0px 8px;
  height: 40px;
  margin: 0;
  float: left;
  font-size: 20px;
}

.input div {
  border-radius: 0px 8px 8px 0px;
  width: 350px;
  background: limegreen;
  color: white;
  height: 36px;
  float: left;
  padding: 4px 0;
  margin: 0;
  vertical-align: middle;
}

.input div p {
  vertical-align: middle;
  text-align: center;
  margin: 0 auto;
  border: none;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: white;
}

<h3 id="forms">Forms</h3>
<div class="forms">
  <form>
    <div class="input">
      <input placeholder="name" name="name" type="text" oninput="checkname(this.id)" id="name">
      <div>
        <p id="namereaction" class="reaction"></p>
      </div>
    </div>
    <div class="input">
      <input type="submit" name="submit" value="submit">
    </div>
  </form>
</div>

So, I can only suggest you to use one of force redraw/repaint hacks, for example:

var element = document.getElementById(id + 'reaction');
if (error.length > 1) {
  element.innerHTML = error;
} else {
  element.innerHTML = '';
}
element.style.display = 'none';
element.offsetHeight;
element.style.display = '';

The fixed JSFiddle.

@North-Wind it's not working for you in my snippet or on your site? — sergdenisov, Sep 13 '17 at 18:40
After a google about safari render bug i have found a solution similar to your answer. The snippet works, but the code like shown above doesn't work on my webpage. — North-Wind, Sep 13 '17 at 18:46
@North-Wind have you tried to add `transform: translateZ(0)` to `.input div p {...}`? — sergdenisov, Sep 13 '17 at 21:48

Safari JS innerHTML bug/error

1 Answers1