Layout shift after opening volume control

Podlove Web Player
1

Hello,

I have an issue with the volume control element with the player. When I click the volume control button and expand the volume control bar, this causes a layout shift, so that the play button gets cut off (see attached
Screenshot 2023-03-21 104244

Do you have any tips on how to prevent this?

Best regards,

Karl

2

It doesn’t seem to be one of the default templates. Can you share the custom template so we can have a look?

3

Hey, even without any styling, the layout shift still happens across all themes: So even with this simplified version (without styling) of the “minimal” theme:

<root>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <play-button variant="simple"></play-button>
                        </div>
                        <div>
                            <progress-bar></progress-bar>
                            <current-chapter></current-chapter>
                        </div>
                        <div>
                            <timer-duration></timer-duration>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div>
                    <speed-control></speed-control>
                </div>
                <div>
                  <volume-control></volume-control>
                </div>
            </div>
        </div>
    </root>
4

Can you share me the link to the screenshot so I can investigate further if this is an issue with the styling or the underlying iframe resizing?

5

Hey, if you visit the following page and scroll down a bit you can see the plugin. When clicking the volume control button the iframe seems to shift:

Thank you for your time!

6

Have you had time to take a look at the example I sent yet?