Is Anyone Experiencing Layout Issues After Upgrading to Chrome 72

Chrome is breaking the layout, how can I fix it?

Tested your code in Firefox and Chrome. They are nearly looking the same, nothing is breaking the layout.

But on your screenshot they are on different sizes.

I think there are different zoomlevels set in your browsers. Please
check if both are on 100%;

Latest Chrome update messed up Sencha Touch 2.0.0 layout

I had the same issue with the ellipsis in the title after restarting Chrome on my desktop and having itself updated to v21.
It seems to be a CSS issue with Sencha Touch 2.0 which is fixed with 2.1.0 b2. See also the Sencha Touch forum.

A workaround for now is to include the following CSS:

.x-title { padding:0 .3em; }
.x-title .x-innerhtml { padding: 0; }

Regarding the other issues I'm afraid I cannot help.

Google Chrome breaks menu

I found a solution within this bug report, I think that issue is related to the issue you're seeing. Add display: table to .site-nav__primary>.menu-item-has-children>ul>.menu-item-has-children ul::before until they get that bug sorted. Apparently display: table will "trigger legacy engine fallback".

.site-nav__primary > .menu-item-has-children > ul > .menu-item-has-children ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  min-height: 21.25rem;
  border: 1px solid var(--color-jacarta-20);
  background: var(--color-subtle);
  display: table /* <-- what you need */
}

---

Related Topics