Having to remove and re-apply a CSS property to make it work. Possible bug with CSS?

Question

UPDATE: Before reading into this post and saying you need more code to replicate the issue, the simple question I am asking is:

"Have you ever had to remove and re-apply a CSS property on an element in order for that style to apply when that property was already on that element and should have been working by default? If so, what was your solution or did you know what was ultimately causing the problem?"

UPDATE 2: I'm not 100% sure but this may only be an issue with the font-size property and it being changed dynamically using Javascript. The CSS for the outer and/or inner elements that are being re-sized in Javascript works as it should, this problem seems to only occur with font sizing, in particular. Perhaps the surrounding HTML's CSS doesn't catch font-size on memory intensive style changes (like our resize function). Just a guess.

---

The rest of this post is a means to clarify what I am talking about.

This problem might be exclusive to Chrome. To clarify, our app is used internally by our sales team and the project was specced out to focus exclusively on Chrome, both for development and field use. Already, the styling is totally off when opening this in other browsers, since we've only had to create our CSS to be Chrome-compliant (how I got so lucky to land such a position, I don't know, haha).

I've only encountered this issue a few times in my coding career which I believe to be a bug in CSS but could just be a rare bug between Javascript making style changes in the DOM and parent container CSS not adapting to the change due to possible memory constraints or slight processing lag between Javascript applying a style to the HTML and the CSS not updating to accomdate. I think this is an important question as I think every front-end web developer has or will come across this at some point in their career.

Situation

To put it as short as possible, we have a container inside our body that we use Javascript to size to a 16:9 aspect ratio relative to the window size. Took a screenshot of the entire window. As you can see, we have the inner container sizing proportionally inside our browser window (the black area, which is the body). The inner container is where all the content for our app displays:

Our CSS is built using percentages, wherever possible. We built a 'resizeUI' function that's mainly used to change the font-sizes based on the current width/height ratio of the inner screen, though there are other elements in that function that get re-sized too, on window re-size. The window always re-sizes perfectly and anything needing specific sizing based on the inner window's width/height pixel ratio works as expected, with the child elements' percentage-based CSS adjusting appropriately. But....

The Problem

When the browser window is re-sized by clicking and dragging (incremental re-sizing) everything on the page re-sizes perfectly. However, when the window size changes drastically, and instantly, fullscreen (Maximize) to small (Restore Down), or visa versa, the font-sizes in the top menu will change BUT the CSS of the parent li will not adjust to accommodate the new font-size unless I un-check (remove) it's padding attribute and recheck it (add it back in). When I do that, it works fine. The li container really just has a padding:1% and, thus, normally adjusts it's size correctly based on the inner span's size which changes with the font re-sizes.

The parent li should automatically adjust to the change of the inner span font-size. I'm positive of this because the parent li container will automatically re-size itself when I modify the menu's font-sizes or text lengths, on the fly, in the inspector.

Here's what it normally looks like either on load or with incremental window size changes:

And here is what it looks like when I go from a small window size to full-screen using Maximize:

My (hacky) Fix

Only way I've gotten this to work is to remove the padding for the <li> elements at the top of the re-size function, then re-apply it at the bottom of the re-size function AFTER the line that re-sizes the font. However, this works 50% of the time. Only when placing a 100ms timeout at the bottom of the re-size function to re-apply the padding have I gotten it to work 100% of the time now.

To help, here's a very basic code example of what i'm working with. The ul sizes automatically to it's inner elements:

Relevant HTML

<ul>
  <li class="menu-items><span>Item 1</span></li>
  <li class="menu-items><span>Item 2</span></li>
  <li class="menu-items><span>Item 3</span></li>
  <li class="menu-items><span>Item 4</span></li>
  <li class="menu-items><span>Item 5</span></li>
</ul>

Relevant CSS

ul {
  position:absolute;
  top:0;
  right:2%;
  text-align:center;
}
.menu-items {
  padding: 1%;
}

Relevant Javascript

What works about 1/2 the time

function resizeUI(){
  $('.menu-items').css('padding','0');
  //Random other elements being re-sized
  $('.menu-items span').css('font-size', properRatio + "px");
  //More elements being resized
  $('.menu-items').css('padding','1%');
}

Works every time

function resizeUI(){
  $('.menu-items').css('padding','0');
  //Random other elements being re-sized
  $('.menu-items span').css('font-size', properRatio + "px");
  //More elements being re-sized
  setTimeout(function(){  
    $('.menu-items').css('padding','1%');
  }, 100);
}

Ultimate Question

Has anyone else encountered similar issues when working with CSS that should adapt to the re-sizing of an element? I sense it's a memory issue or bug between Javascript and CSS, given that having to set a timeout is the only reliable way I have gotten it to work 100% of the time, and, again, this ONLY occurs on a vast, instant change in window size (Maximize to Restore down, or visa versa) but not on manual, smaller, incremental resizing. Sorry for such a verbose post/question but I have encountered this weird bug a few times before with having to remove and reapply a CSS attribute to get it to work properly and I have no doubt other developers have too.

Answer 1

The padding is actually working. Each unit (div or whatever you are using) is overlapping the one previous evenly because you are over 100% of the view width in total. They are being built from left to right and when it gets to the end of the max size allowed, they will all equally push over the ones previous. Also padding affects elements inside of the div and will not affect divs outside of itself. So they are all the correct size but you have not established a rule that would stop divs from overlapping. Margin can do that but if they are over 100% of the desired size you will have to deal with over flow in some way. You can try to use auto for padding, but margin may be better. Otherwise you will have to play with the sizes and percentages to make it fit to the max allowed width. Checkout the CSS Box Model here.

Answer 2

Have you ever had an issue of having to remove and re-apply a CSS property on an element in order for that style to apply when it was already there and should have been working by default?

Yes: https://stackoverflow.com/a/34245989/1529630

What was your solution?

Unsetting the styles and resetting them immediately after didn't work, probably because the browser hadn't updated the page yet, and then it detected that I resetted so at the end it did nothing.

Unsetting and resetting in a timeout worked, but caused annoying blinks.

In my case, the solution was removing the element and inserting it back immediately.

window.addEventListener('resize', function() {
  // Force a rerender
  var parent = element.parentNode,
      next = element.nextSibling;
  parent.removeChild(element);
  parent.insertBefore(element, next);
});

Warning: this will force the browser to do layout, paint and composite operations, which is expensive.