In Firefox, if zoom is set it overflows the container

[cuzisaidso5]

I noticed that if you were to look at a page in firefox with zoom set, the hero image seems to "grow" outside of it's container.

[cuzisaidso5]

I think I may have found a solution. In the paragraph--xeno-hero.html.twig file, add a div with overflow set to hidden.

<div style="overflow: hidden">

<div{{ attributes.addClass(classes).setAttribute('data-overlay', overlay_levels).setAttribute('data-speed', parallax_speeds).setAttribute('data-offset', parallax_offset) }}>
  {% if content.xeno_background_image|render %}
    <div class="paragraph--type--xeno-hero__image">
      {{ content.xeno_background_image }}
    </div>
  {% endif %}
  {{ content|without('xeno_background_image', 'xeno_invert', 'xeno_offset', 'xeno_overlay', 'xeno_parallax') }}
</div>

</div>

[thejimbirch]

hmm, there should be a div around the image with overflow-hidden on it:

See .paragraph--zoom .paragraph--type--xeno-hero__image in the template and CSS.

[cuzisaidso5]

Yes, it's there, but in Firefox (I'm using version 58 and it's also happening in Microsofts Edge browser) it's not taken into account and the image "grows" outside of its container. In the images above, you notice that your navigation gets covered up.

There's an additional <div> that is the parent element of the xeno hero div that's not set to anything (I noticed it in my browsers inspector). When setting that to overflow: hidden, the module works as expected. It seems that in the twig file, adding <div style="overflow: hidden"> [xeno hero code] </div> may solve that issue, but I don't know if it's considered "sloppy" code or what.

Great module, btw. Seems to be one of the better solutions to provide a hero image for a Drupal site. Thanks for the work.

[macronomicus]

No matter how many ways I tried adding overflow:hidden to divs or adding additional divs I couldnt get the zoomed div to respect any wrappers overflow:hidden. Until I got rid of the display:table & changed to display:block in the rule below. This is on latest Firefox build 60.0.1, no additional divs or css rules are required.

Seems like the problem for me is coming from bootstrap-paragraphs.min.css 7

.paragraph {
    display: table; /* mehh */
    margin-left: 0;
    margin-right: 0;
    table-layout: fixed;
    width: 100%;
}

Just adding it to the xeno-hero.css 2 will fix it

.paragraph {
    clear: both;
  display: block; /* fix for Firefox & Edge overflow hidden issue bootstrap Paragraphs specific.  https://github.com/xenomedia/xeno_hero/issues/16 */ 
}