2

I have been testing my app on several devices and just found out that one of my css styles is not working on Safari, specifically my iPhone and iPad. I am making a to do app with Angular and would like a red line to cross out the text when the item is marked completed.

If I create a new paragraph element and give it the class test and apply the css below, the styling works fine.

Example, this line gets crossed out

<p class="test">testing 3</p>

With this css

.test {
  text-decoration: line-through;
  -webkit-text-decoration-line: line-through;
  color: red;
}

However, this html does not get crossed out

  <li *ngFor="let list of lists" [class.completed]="list.completed" class="list-lines">
    <table>
      <tr>
        <td class="check">
          <input id='checked' *ngIf="list.completed === false" type="checkbox" (click)='isChecked(list)'>
          <input id='checked' *ngIf="list.completed === true" type="checkbox" (click)='isChecked(list)' checked>
        </td>
        <td class="todoBox">
          <span class="todo" (click)="isChecked(list)">{{list.item}}</span>
        </td>
        <td>
          <button id="delOneButton" class="btn btn-danger" (click)="delOne(list)" [hidden]="!list.completed">Delete</button>
        </td>
      </tr>
    </table>
  </li>

When this css is applied to my class completed. Like I said it works fine on my desktop with Chrome, but not on my Safari. What gives??

.completed {
  text-decoration: line-through;
  -webkit-text-decoration-line: line-through;
  color: red;
}

I found this documentation but can't seem to find anything else about the mobile css syntax for line through text decoration. Does anyone know where I can find the syntax?

enter image description here

Cuong Vo
  • 249
  • 1
  • 6
  • 16

3 Answers3

10

Looks like I needed to be more specific with the webkit css. Instead of 

.completed {
  text-decoration: line-through;
  -webkit-text-decoration-line: line-through;
  color: red;
}

I needed to write

.completed .todoBox .todo {
  text-decoration-line: line-through;
  -webkit-text-decoration-line: line-through;
  text-decoration-color: red;
  -webkit-text-decoration-color: red;
}
Cuong Vo
  • 249
  • 1
  • 6
  • 16
4

Here we go -webkit-text-decoration-line: line-through; more information about this you could read here. Hope this help :)

Rafv
  • 261
  • 2
  • 9
  • Aww had my hopes this was going to work. It didn't work. I don't know if it is because the mobile safari and desktop safari have different compatiblilty?? :( – Cuong Vo Jul 07 '18 at 16:18
  • 1
    Ok It does work. But not the way I am intending. Can you check my code and see what the problem is? I will add my html code and further explain. – Cuong Vo Jul 07 '18 at 18:36
  • everything is fine, works on my iphone too. see this fiddle and tell me what you see https://jsfiddle.net/nyrq2x8c/5/ – Rafv Jul 07 '18 at 18:51
  • Yes I can see the cross through. I revised my question since that works. Can you review it again and see if you can help me? – Cuong Vo Jul 07 '18 at 18:56
  • Try to styling to specific browser, safari: ` _::-webkit-full-page-media, _:future, :root .yourclass {}` safari bug i guess – Rafv Jul 07 '18 at 19:02
1

This worked for me in Safari and Google Chrome.

.test{
     text-decoration: line-through red;
     -webkit-text-decoration: line-through red;

}

Juan Carlos Ibarra
  • 1,299
  • 14
  • 15