Preventing Reflow

  • Resolved Mike Meinz

    (@mikemeinz)


    6 years, 8 months ago

    I am submitting this with the hope that you will consider making this change to the MetaSlider plugin to optimize browser display of slide shows.

    RE: https://developers.google.com/speed/docs/insights/browser-reflow

    I made the following change in ml-slider\inc\slider\metaslider.class.php. In the get_container_style() function, I replaced:
    $style = "max-width: {$this->get_setting( 'width' )}px;";
    with:
    $style = "max-width: {$this->get_setting( 'width' )}px;max-height: {$this->get_setting( 'height' )}px;";

    This change eliminates the browser reflow that occurs when the MetaSlider plugin slideshow is displayed by the browser. This change works in my case with my slide show. There may be other changes required to prevent browser reflow if different MetaSlider options are selected.

    Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @mikemeinz,

    Could you do this with CSS instead? That way you wont be affected by an update.
    Alternatively you could use the metaslider_container_style filter to add this. 

    add_filter('metaslider_container_style', 'mikemeinz_add_container_class');
function mikemeinz_add_container_class($style, $id, $settings) {
  return $style . 'max-height: ' . $settings['height] . 'px;';
}

    I didn’t test this code but let me know if it’s not working.

    Thread Starter Mike Meinz

    (@mikemeinz)

    @kbat82, Thanks for your comment. What I am really looking for is for the plugin to do whatever is required to prevent browser reflows.

    Hi @mikemeinz,

    I understand. Adding that filter will do just that though. It hooks into the plugin. I left a note to investigate this further on our end but that could take weeks. There’s a lot to consider when we make changes to the styling.

    Let me know if the filter doesn’t work.

    • This reply was modified 6 years, 8 months ago by Kevin Batdorf.
    Thread Starter Mike Meinz

    (@mikemeinz)

    @kbat82

    With a couple of changes, your example works but I am now not sure that either my solution or your solution (which results in the same HTML as my solution) solved the browser reflow issue. 

    add_filter('metaslider_container_style', 'EL_add_container_class',10,3);
function EL_add_container_class($style, $id, $settings) {
  return $style . 'max-height: ' . $settings['height'] . 'px;';
}

    At this time, I don’t have enough expertise to solve the browser reflow issue. If someone else does, I am open to testing. In the meantime, I will continue researching to see if I can find a solution.

    Thanks for your help.

    • This reply was modified 6 years, 8 months ago by Mike Meinz.
    Thread Starter Mike Meinz

    (@mikemeinz)

    @kbat82

    The metaslider_container_style filter below works to prevent reflow in a responsive web site by using the image’s aspect ratio to reserve space using padding-bottom. I got the idea from the article found at the link below. It would be nice if this was a standard feature of MetaSlider. Thanks for your help with this and for your consideration.

    add_filter('metaslider_container_style', 'EL_add_container_class',1,3);
function EL_add_container_class($style, $id, $settings) {
  return $style . 'position:relative;height:0;padding-bottom:' . (100 * $settings['height'])/$settings['width'] . '%;';
}

    RE: https://justmarkup.com/log/2015/11/definining-aspect-ratio-to-prevent-reflow/

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Preventing Reflow’ is closed to new replies.