Customizer preview styles breaks on chrome

I’m pulling my hair out over this one. I’m adding customizer functionality to allow my girlfriend style a website that I’m building. She wants to be able to change the background color of the menu, and given that I’ve done this with several other divs on the theme, I figured this would be no big issue; however, she uses chrome, and I use firefox.

My customizer options for modifying the style of the background on menu-items works just fine, and the style tag I’m using to grab the theme_mod also works just fine on pageload–in both firefox and in chrome. The preview works just fine in firefox as well, selective refresh and everything. However, when the customizer is being used on chrome, the the selective refresh correctly grabs the style tag, and then completely breaks EVERY SINGLE style element for everything else that the customizer has customized.

If you modify another control, the settings revert, but modify a control related to one of the menu-items, and it breaks everything again (and by everything, I mean everything that is an style tag, and not anything in a <link> .css file like style.css for example).

Because looping through all menu items and setting all that up (for both the customizer and the inline style tag) makes the code fairly verbose, I’ve hardcoded one single menu-item into my code such that I can provide you guys with an example:

$wp_customize->add_setting( 'menu-item-8_bg_color', array(
        'type' => 'theme_mod',
        'transport' => 'postMessage',
        'sanitize_callback' => 'sanitize_hex_color'
        )
    );

    $wp_customize->add_control( new WP_Customize_Color_Control(
        $wp_customize,
        'menu-item-8_bg_color',
        array(
            'section' => 'menu',
            'setting' => 'menu-item-8_bg_color',
            'label' => 'home background color',
            'description' => 'shows if no background image or if image has transparency.',
            'setting' => 'menu-item-8_bg_color'
            )
        )
    );

    $wp_customize->selective_refresh->add_partial( 'menu-item-8_bg_color', array(
        'selector' => '#menu-item-styles',
        'container_inclusive' => True,
        'render_callback' => function() { return menu_items_style(); },
        'fallback_refresh' => True
        )
    );

function menu_items_style() {

return '<style id="menu-item-styles" type="text/css">
    #menu-item-8 {
    background:          <?= get_theme_mod( 'menu-item-8_bg_color' ) ?>;
    }
</style>';

}

I have tried escaping out of php, echoing echoing, and (as above) simply returning out the style tag of menu_items_style().
Also remember, this is a simplified version of what my code is since it requires me to loop through menus and all of that junk. I have simplified this to hardcode the value of a menu-item (which, can obviously change if you add/delete menu-items from a menu) only for the purposes of debugging. I don’t think the rest of that code has anything to do with this because I’m experiencing exactly the same thing in chrome (but no problem in firefox).
Another point to mention, unless I’m very foolish, I’m really confident that the style tag is correct here, because–in chrome–if I simply edit the style element (in the chrome inspector), change nothing, and then exit editing the style element, then Chrome starts displaying all of the styles correctly again. I can even edit a different style element and chrome then updates accordingly.
Again, this is ONLY happening in Chrome, and ONLY with the menu-item control(s). All other controls work just fine in the customizer and even in chrome. I’ve even hardcoded in the background css attribute to something like red, and it still breaks all styles.

There are no errors from the javascript console and no errors from php debugging or in debug.log (both of which are obviously turned on). And chrome is definitely getting the updated inline style tag in the preview window, it just breaks everything.

I have asked about this on IRC and was recommended to make the post here. My gut tells me that this is a chrome problem (since it works on firefox), but its really driving me up the wall as to why other customize controls work just fine on chrome (that modify background color like this as well).

I simply just want to hear if anyone else can replicate the problem to know if this is my own stupidity or if this is a problem with chrome.

Thanks for your time.

• This topic was modified 5 years, 9 months ago by nicholasrees.