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