Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

[html highlight] If divs have padding, highlights too wide & highlight shown for non-visible elements #3326

Closed
peterflynn opened this Issue Apr 3, 2013 · 6 comments

Comments

Projects
None yet
5 participants
Member

peterflynn commented Apr 3, 2013

Start with this content:

<!doctype html>
<html>
<head>
    <title>Some other page</title>

    <style>
        div {
            padding-left: 120px;
        }
    </style>

</head>
<body>

    <h2>Stuff</h2>

    <style>
        .blah {
            color: red;
        }
    </style>

    <h2>Some other stuff</h2>

    etc. etc. etc.

</body>
</html>
  1. Launch Live Preview
  2. Place the cursor anywhere within the head or within the body's <style> block (also works with script blocks, display:none elements, etc.)
  3. Place the cursor on one of the <h2>s

Result:
2 - a collapsed highlight is visible in the upper left
3 - the page gets a horizontal scrollbar, and the right edge of the highlight is off the side of the screen

Expected:
2 - no highlight shown
3 - no scrollbar appears; right side of highlight's border is visible

Member

peterflynn commented Apr 3, 2013

I'd imagine there are many variations of this bug -- basically any style that's not set explicitly on our highlight could interfere with it. For example, using margin-left instead causes a similar bug.

I'm pretty sure this has been around since CSS highlighting was introduced though, so it may not be that urgent.

@ghost ghost assigned gruehle Apr 3, 2013

@RaymondLim RaymondLim closed this in aeb343b Apr 3, 2013

Contributor

RaymondLim commented Apr 3, 2013

FBNC to @peterflynn

It is auto closed by the pull request, but you can double check on it.

Member

peterflynn commented Apr 4, 2013

I still see this for elements narrower than the padding size, e.g. <div style="position:absolute; background:red; width:10px; height:10px; padding:0; margin:0"></div>.

@peterflynn peterflynn reopened this Apr 4, 2013

Member

peterflynn commented Apr 4, 2013

Also still repros for if the CSS is margin-left instead of padding-left -- the highlight is the correct width but it's too far to the right (which can again cause scrollbars to appear in some cases).

@ghost ghost assigned peterflynn Apr 4, 2013

Member

jasonsanjose commented Apr 4, 2013

Contributor

redmunds commented Apr 10, 2013

Confirmed. Closing.

@redmunds redmunds closed this Apr 10, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment