Flicker after unhide element

[Hanselc]

Good Morning,

In my EPUB, I hide elements using the following CSS Classes: .collapse { max-height: 0; transition: all 0.4s linear; overflow: hidden; visibility: hidden; border-color: #fff; border: 1px solid #bdb9b9; border-radius: 5px; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } .show-block { border-radius: 5px; max-height: 300px; transition: all 0.4s linear; overflow: auto; visibility: visible; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } I use an HTML button to trigger a javascript function that toggle the "show-block" class. `document.addEventListener("DOMContentLoaded", function() {

var triggers = document.querySelectorAll('[data-toggle="collapse"]');

triggers.forEach(element => { element.addEventListener('click', function (ev) { var selector = this.getAttribute('data-target'); collapse(selector); }, false); });

var collapse = function collapse(selector) { var target = document.querySelector(selector); target.classList.toggle('show-block'); }; });`

When I press the button to show the hidden element, in Chrome and Edge there is a flicker after complete the showing, in some cases in Edge, the window are presented fully in blank, I must change the page to redraw.

Thank you so much.

[danielweck]

This is probably due to the "resize sensor" which ensures that document content / DOM elements that show/hide at arbitrary points in time (usually during user interaction) trigger a re-calculation of pages/columns to update the internal state of the reflowable view. See initResizeSensor(): https://github.com/readium/readium-shared-js/blob/7f245beba1ed97eaabce0aa5e9cf2f3b23e8f8f6/js/views/reflowable_view.js#L891