• When I hover over a word the hyperlink button is larger than it should be. This has been happening for a little while now and not related to the latest WP version today.

    pictures of issue

    I’ve linked to an imgur which shows the issue. On inspecting it in firefox the button grows even larger. I can save the page and refresh to get rid of this but it’s also very funny.

    The main problem for me is that I write a lot of articles, this is a live site, and it gets in the way a lot. I also can’t deactivate any plugins or change themes to try and test this because I’m getting multiple visitors per second, any downtime is lost money.

    The relevant html is

    <div class="block-editor-block-toolbar__slot">
    <button type="button" aria-pressed="false" id="id-7gcsms-6" tabindex="-1" data-toolbar-item="true" class="components-button components-toolbar-button has-icon" aria-label="Bold">
    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
    <path d="M14.7 11.3c1-.6 1.5-1.6 1.5-3 0-2.3-1.3-3.4-4-3.4H7v14h5.8c1.4 0 2.5-.3 3.3-1 .8-.7 1.2-1.7 1.2-2.9.1-1.9-.8-3.1-2.6-3.7zm-5.1-4h2.3c.6 0 1.1.1 1.4.4.3.3.5.7.5 1.2s-.2 1-.5 1.2c-.3.3-.8.4-1.4.4H9.6V7.3zm4.6 9c-.4.3-1 .4-1.7.4H9.6v-3.9h2.9c.7 0 1.3.2 1.7.5.4.3.6.8.6 1.5s-.2 1.2-.6 1.5z"></path></svg></button><button type="button" aria-pressed="false" id="id-7gcsms-7" tabindex="-1" data-toolbar-item="true" class="components-button components-toolbar-button has-icon" aria-label="Italic">
    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
    <path d="M12.5 5L10 19h1.9l2.5-14z">
    </path></svg></button>
    <button type="button" aria-pressed="false" id="id-7gcsms-8" tabindex="0" data-toolbar-item="true" class="components-button components-toolbar-button has-icon" aria-label="Link">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" size="24" role="img" aria-hidden="true" focusable="false">
    <path d="M15.6 7.2H14v1.5h1.6c2 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7H14v1.5h1.6c2.8 0 5.2-2.3 5.2-5.2 0-2.9-2.3-5.2-5.2-5.2zM4.7 12.4c0-2 1.7-3.7 3.7-3.7H10V7.2H8.4c-2.9 0-5.2 2.3-5.2 5.2 0 2.9 2.3 5.2 5.2 5.2H10v-1.5H8.4c-2 0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z">
    </path></svg></button>
    <div class="components-dropdown components-dropdown-menu">
    <button type="button" id="id-7gcsms-9" tabindex="-1" data-toolbar-item="true" aria-haspopup="true" aria-expanded="false" class="components-button components-dropdown-menu__toggle has-icon" aria-label="More">
    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false">
    <path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z">
    </path></svg></button>
    </div></div>

    Specifically button id id-7gcsms-8 and the svg icon is the thing that’s massive.

    I’m not really sure what to do. I have some suspicions on what it could be, but all my caching plugins don’t work for logged in users or for the dashboard. Any ideas?

Viewing 1 replies (of 1 total)
  • The main problem for me is that I write a lot of articles, this is a live site, and it gets in the way a lot. I also can’t deactivate any plugins or change themes to try and test this because I’m getting multiple visitors per second, any downtime is lost money.

    Then WHY WHY do you not have this on a staging site at the very least?
    Or, use a sync approach.

    Very difficult to troubleshoot without the URL, but obviously there is a class that is referencing button, or svg, or id-7gcsms-8.
    So you need to isolate which one:

    https://write.corbpie.com/inspect-a-css-hover-element-in-chrome-dev-tools/

    My first guess would be on the button element.

Viewing 1 replies (of 1 total)

The topic ‘Hyperlink button comically large’ is closed to new replies.