Random inline styles being applied

Question

I have no code that adds inline styles to div.size-option, but the first one has random inline styles added to it. No where else in the code does anything mess with these elements. The overall setup is too complicated to reproduce in a codepen.

return <div id="options-container">
        {ctrl.model.map(function(model) {
            return <div class='size-option-container'
                onclick={() => { if(model.inStock()) vm.select(model.id()); }}
                option={model.id()}>
                <div
                    class={'size-option' +
                        (model.isSelected() ? ' selected': '') +
                        (model.inStock() ? '' : ' option-out-of-stock')}>
                    <span class='size'>{model.name()}</span>
                </div>
            </div>
        })}
</div>

Compiled:

return m(
        'div',
        { id: 'options-container' },
        ctrl.model.map(function (model) {
            return m(
                'div',
                { 'class': 'size-option-container',
                    onclick: function onclick() {
                        if (model.inStock()) vm.select(model.id());
                    },
                    option: model.id() },
                m(
                    'div',
                    {
                        'class': 'size-option' + (model.isSelected() ? ' selected' : '') + (model.inStock() ? '' : ' option-out-of-stock') },
                    m(
                        'span',
                        { 'class': 'size' },
                        model.name()
                    )
                )
            );
        })
);

Output:

<div id="options-container">
  <div class="size-option-container" option="1428">
    <div class="size-option selected" style="width: 127.333px; margin-right: 15px;"><span class="size">S</span></div>
  </div>
  <div class="size-option-container" option="1366">
    <div class="size-option"><span class="size">M</span></div>
  </div>
  <div class="size-option-container" option="1351">
    <div class="size-option"><span class="size">L</span></div>
  </div>
  <div class="size-option-container" option="1447">
    <div class="size-option"><span class="size">XL</span></div>
  </div>
  <div class="size-option-container" option="953">
    <div class="size-option"><span class="size">XXXL</span></div>
  </div>
  <div class="size-option-container" option="1016">
    <div class="size-option"><span class="size">XXXXL</span></div>
  </div>
  <div class="size-option-container" option="1070">
    <div class="size-option"><span class="size">4X</span></div>
  </div>
  <div class="size-option-container" option="1117">
    <div class="size-option"><span class="size">5X</span></div>
  </div>
</div>

Specifically the first size-option-container:

<div class="size-option selected" style="width: 127.333px; margin-right: 15px;"><span class="size">S</span></div>

UPDATE

Random changes to the class styles periodically stop adding the inline styles.

UPDATE 2

Adding style='' to div.size-option solves the issue.

UPDATE 3

Changing the HTML around a little I now have a new random style: <div class="small-4 columns" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms;"><div class="size-option-container" option="1428"><div style="" class="size-option"><span class="size">S</span></div></div></div>

score 0 · Answer 1 · answered Jul 18 '16 at 15:29

Since the code you've posted doesn't involve the style property at all and Mithril is a totally unopinionated about styling, it's clear to me that this is down to external code modifying the contents.

If you're using a modern web browser, you can use DOM breakpoints to identify the script that's causing these modifications. Using Chrome, for example:

Add a config function to the wrapping element and stick a debugger statement in it:

return <div 
  id="options-container"
  config={function(el,init){
    if(!init)
      debugger
  }}
>

Open developer tools by hitting F12 and (re)load the page running your script: the browser will pause script execution immediately after the element is generated by Mithril.
Chrome will show you the value assigned to the el parameter of the config function: right-click it and 'Reveal in navigator' - or right-click the element as it appears in the browser and 'Select' it.
In the elements panel, right-click the element that gets strange styles applied to it, and select 'Break on...' > 'Attributes modifications'.
Hit F8 to resume script execution (it should still be paused from landing on the debugger statement.
The browser will pause script execution whenever a script attempts to modify the attributes of the element in question, and reveal the line of code doing it. When this happens, it will probably be a generic attribute modification method jQuery or similar. By hitting Ctrl+., you can move back to the function that called this one, successively, until you reach a line of code from your source code.

I actually found that it seemed to be a conflict with the Mithril redraw and Swiper.js. For whatever reason, if there was previously a swiper in same spot (changing the m.component), that it would somehow keep some elements from the swiper. If there was no swiper there before changing, then the problem wouldn't happen. And it was always the same elements from the swiper in the same place after redraw. — swade, Jul 27 '16 at 13:37
I will look into doing your steps as soon as I get a chance. — swade, Jul 27 '16 at 13:37
@Steven-Wade that makes sense: I was just looking through the [Swiper API](http://idangero.us/swiper/api/) and there's a `destroy` method you're meant to call to when getting rid of an instance. It accepts a `cleanupStyles` flag, which sounds like exactly what you need. Mithril elements have an `onunload` hook ([read this section of the docs](http://mithril.js.org/mithril.html#the-config-attribute)) you can use to invoke the Swiper `destroy` method… — Barney, Jul 27 '16 at 18:15
Great, I will try the `cleanupStyles` flag. I tried destroy the first time and it didn't work and didn't think that flag would be applicable so I didn't even try it. — swade, Jul 28 '16 at 13:39

Random inline styles being applied

1 Answers1