Uncaught TypeError: Cannot set property offsetWidth of #<HTMLElement> which has only a getter

Question

I'm developing a web app with AngularJS. I had an error which appeared from nowhere, it was working fine and I really don't know why it doesn't work anymore.

So it's in a directive, I try to set property offsetWidth of an element in the directive html template. Since I really don't know where it could come from, I'll give you full code of my directive and template. The directive creates an app button and handles its visual effect on click. It's the line $element[0].offsetWidth = $element[0].offsetWidth; which triggers the error. (It's a trick to restart animation)

I repeat again, this code was working fine and I'm almost sure I didn't make any changes. I'm using Chrome to debug, maybe it comes from it ?

Error: Uncaught TypeError: Cannot set property offsetWidth of #<HTMLElement> which has only a getter

Directive:

'use strict';

XVMApp.directive('appButton', ['$location', function($location){
    return {
        restrict: 'E',
        replace: true,
        scope: {
            img: '@',
            fillPercent: '@?',
            target: '@?'
        },
        link: function ($scope, $element) {

            // Image percentage fill button
            if($scope.fillPercent === undefined) $scope.fillPercent = '100';

            // Click event
            $element.on('click', function() {

                // Url target
                if($scope.target !== undefined){
                    $scope.$apply(function() {
                        $location.path($scope.target);
                    });
                }

                // Click effect
                $element[0].preventDefault;
                $element[0].classList.remove('app-button-click-effect');
                $element[0].offsetWidth = $element[0].offsetWidth;
                $element[0].classList.add('app-button-click-effect');

            });

        },
        templateUrl: 'src/directive/appButton/app-button.html'
    };
}]);

Template:

<div class="app-button"
     style="background-size: {{fillPercent}}%; ">
        <div style="
            background-image: url('src/assets/img/{{img}}');
            background-repeat: no-repeat;
            background-position: center;
            background-size: {{fillPercent}}%;
            height: 100%;
            width: 100%; ">
        </div>
</div>

Answer 1

I'm guessing you've recently updated to Chrome 43. I just encountered the same issue. Looks like the latest version treats dom nodes more like standard js classes, and any properties that are read only will now throw a js error. Setting the offsetWidth would never have been working anyway as it's a read only property, but previously Chrome would have just silently ignored it, whereas now if you're using strict mode it's throwing this error. See here for details: http://updates.html5rocks.com/2015/04/DOM-attributes-now-on-the-prototype