Angular.js: Binding issue in Safari

Created on 6 Nov 2017 · 11Comments · Source: angular/angular.js

I'm submitting a ...

[X] bug report
[ ] feature request
[ ] other

Current behavior:
This only occurs in Safari:

When the inner HTML of a div is assigned via the curly-brace binding method i.e. {{some_text}}, and this text spans multiple lines, and then that scope variable is updated with a shorter string that spans fewer lines, some of the relic text remains.

Expected / new behavior:
When a bound string displayed within a view is replaced, all relic text should be cleared.

Minimal reproduction of the problem with instructions:
Note this only occurs in safari:
https://plnkr.co/edit/t6Ts2DlhV84C7CLFzdui?p=preview

AngularJS version: 1.x.y
This has been replicated in 1.4.2 through to 1.6.6

Safari $compile browser fix

Source

eamers

All 11 comments

This looks like a visualisation issue with safari which doesn't seem to be related to angularjs.
I've created a plunkr without making use of AngularJS and it has the exact same issue in Safari:

https://plnkr.co/edit/2C5CRSGotDmixpLMTCln?p=preview

You probably want to open an issue with Safari.

frederikprijck on 8 Nov 2017

@frederikprijck Nice catch! Someone else has also pointed out that setting the ng-bind attribute of the div instead of curly braces in the inner html solves this. I'm not familiar enough to know the inner workings of angular to know how these two approaches are different, but it may also shed some light on a pro-active approach that doesn't rely on a proprietary codebase to be fixed.

eamers on 8 Nov 2017

👍1

@eamers You're welcome. Please do close the issue if it's solved.

frederikprijck on 8 Nov 2017

@earners It's good to highlight these issues, but the effort should really be to fix it in Safari. If we put it in a workaround for every browser bug, then they'll get away with bad implementations.

Narretz on 9 Nov 2017

Btw, does this happen only in a specific Safari version? Or, in which version have you tested it?

Narretz on 9 Nov 2017

I managed to reproduce it on Version 11.0.1 (12604.3.5.1.1) on macOS 10.12 Sierra.

frederikprijck on 9 Nov 2017

From a quick look, this looks like a rendering bug in Safari. I.e. by inspecting the node in DevTools, the text seems to be updated correctly, but this is not correctly reflected on the screen. If I had to guess, I would say this seems like a broken rendering optimization of Safari (maybe trying to be smart and only rerender part of the screen that is affected by a change).

In any case, I agree with @Narretz that this is not something we should try to work around in AngularJS. It should be fixed on Safari.

gkalpak on 10 Nov 2017

👍1

Has anybody of you reported this? Does Safari / webkit have a public bug tracker yet?

Narretz on 14 Nov 2017

Is it true that the rendering bug does not occur if you use ng-bind? If so, what are we doing to the DOM that is different between interpolation and ng-bind? Also , if that is case then it might be worth adding something to our docs about this known issue with Safari?